dlyk-part2-front-1

发表于 更新于 分类于 ，

前端

一 、 登录界面

（1）用vite脚手架创建项目

工程化方式，采用脚手架工具创建一个vue工程，然后进行开发；（项目开发广泛使用）

image-20240218233633476

（2）vue项目的工程结构说明

image-20240218234826841image-20240219000847361

image-20240219000858770

image-20240219000912548

image-20240219000919973

（3）启动Vue项目工程

1
2
3
4
5
6
7
//以下是为了修改端口 之前的（老版本）vue端口占了8080，这里
vite,config.js:

server:{
  host:'127.0.0.1',
  port:8081,
  open:true,
1
2
3
4
cd dlyk_front
npm install  或者  npm i
npm run dev

（4）开始Vue的项目开发

  • 最基础的文件

    最基础的就是.vue文件，这个文件的就是vue界面，也成为vue组件，一般来说是分为三个部分：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    1. //<template> 这个里面写了一个html业面要展示的内容

       //</template>

    2. //<script> 这个里面鞋的是javascript的代码

       //</script>

    3. //<style> 这里写的是css的样式

  • vue工程的运行流程分析

    ==项目的运行入口：main.js==

1
2
3
4
5
6
7
8
9
10
11
import { createApp } from 'vue'//createApp是函数
import './style.css'
import App from './App.vue'//从一个单文件组件中导入根组件

createApp(App)
    .mount('#app')
    //利用导入的函数 创建一个vue应用
    //挂载到页面的#app这个id下，id在index.html<div id='app'>
    //动态渲染在这个div里
    //运行一下，把运行的结果放在这个id的标签下

  • 登录页面使用的技术

    vue – controller - service – manager - mapper ( mysql、redis)

    页面使用了element-plus进行页面开发；

    1. element plus安装

我们的项目，需要使用到一些页面的效果（表单、输入框、表格、按钮、布局、图标等等），我们采用的都是element-plus给我们提供的；

1
2
3
4
5
6
7
1、项目中要安装element-plus：
npm install element-plus --save
npm i element-plus --save
-g 全局安装，安装到D:\course\tool\node-v20.9.0-win-x64\node_global
--save表示安装包信息会写入package.json的dependencies中，在dependencies中，那么项目打包就会依赖到该模块；
--save-dev上线不需要用，如果项目打包时不需要依赖该模块，那么就使用--save-dev，它会在devDependencies下，表示项目开发需要依赖该模块，项目打包发布就不需要它；

2、导入element-plus

1
2
3
4
5
6
7
8
在main.js中

import ElementPlus from 'element-plus'
//css不用 from
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).mount('#app')
    //挂载一定是最后一步

3. element提供的组件

设计 | Element Plus (gitee.io)

element-plus提供的组件：

1、Basic 基础组件

2、配置组件

3、Form 表单组件

4、Data 数据展示

5、Navigation 导航

6、Feedback 反馈组件

7、Others 其他

image-20240219004142653

4. 布局

这里是利用element实现最简单的左右布局，由于我们不弄前端，这个浅浅了解就行，无需非常深入

step1：创建新vue component

composition api:大项目 、推荐

options api ：初学者

创建image-20240219073424268

step2：界面

创建一个view文件夹 ，里面都是要写的一些页面 。

在view文件夹下面 创建LoginView.vue的页面，然后就开始编写。

去element ui的网站里面去复制格局和部件等等。

当要加入表单的时候，就是要从页面获取信息的时候，需要在script里加入一些设置

注意：

要在App.vue处增加内容

1
2
3
4
5
6
7
8
9
10
import { createApp } from 'vue'//createApp这个是一个函数
//import './style.css'
//import App from './App.vue'//从一个单文件组件中导入根组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

    
import loginView from "./view/LoginView.vue";
createApp(loginView).use(ElementPlus).mount('#app')//创建一个vue对象//挂载到页面的#app这个id下
    //上面两句很重要
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<template>
  <el-container>
<!--    左侧-->
    <el-aside width="200px">
      <img src="../assets/loginBox.svg">
      <p class="imgTitle">
        欢迎使用动力云客系统
      </p>
    </el-aside>
    <!--    右侧-->
    <el-main>
      <div class="loginTile">欢迎登录</div>
      <el-form ref="loginRefForm" :model="user" label-width="120px" :rules="loginRules">
        <el-form-item label="账号" prop="loginAct">
          <el-input v-model="user.loginAct" />
        </el-form-item>

        <el-form-item label="密码" prop="loginPwd">
          <el-input type="password" v-model="user.loginPwd" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="login">登 录</el-button>
        </el-form-item>

        <el-form-item>
          <el-checkbox label="记住我" v-model="user.rememberMe" />
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
  //定义页面使用到的变量，定义时初始值都是给个空的
<script>
import {defineComponent} from "vue";

export default defineComponent({
  name: "LoginView",

  //定义页面使用到的变量，定义时初始值都是给个空的
  data() {
    return {
      //对象变量定义，是{}
      user : {},
      //字符串变量定义，是''
      name : '',
      //数字变量定义，是0
      age : 0,
      //数组变量定义，是[]
      arr : [],
      //list集合对象(对象数组)，是[{}]
      userList : [{}],
      //定义登录表单的验证规则
      loginRules : {
        //定义账号的验证规则，规则可以有多个，所以是数组
        loginAct : [
          { required: true, message: '请输入登录账号', trigger: 'blur' }
        ],
        //定义密码的验证规则，规则可以有多个，所以是数组
        loginPwd : [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 16, message: '登录密码长度为6-16位', trigger: 'blur' }
        ]
      }
    }
  },


})
</script>

step3：表单验证

（1）账号字段：loginAct （account）登录账号；

（2）密码字段：loginPwd （password）登录密码；

（3）是否记住我字段：rememberMe

需求：前端非空验证；

1
2
3
1、在<el-form>里面定义一个:rules="rules"；
2、在要验证的el-input上的<el-form-item>中定义prop=xx 比如下面的loginAct和pwd， 
3、给要验证的字段定义验证规则；

3、给要验证的字段定义验证规则；

  1. 在el-form头标签里面写：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<el-form ref="loginRefForm" :model="user" label-width="120px" :rules="loginRules">
        <el-form-item label="账号" prop="loginAct">
          <el-input v-model="user.loginAct" />
        </el-form-item>

        <el-form-item label="密码" prop="loginPwd">
          <el-input type="password" v-model="user.loginPwd" />
        </el-form-item>
	这里是增加了一个点击事件
        <el-form-item>
          <el-button type="primary" @click="login">登 录</el-button>
        </el-form-item>

        <el-form-item>
          <el-checkbox label="记住我" v-model="user.rememberMe" />
        </el-form-item>
      </el-form>
  1. 需要在script里面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script>
import {defineComponent} from "vue";

export default defineComponent({
  name: "LoginView",

  //定义页面使用到的变量，定义时初始值都是给个空的
  data() {
    return {
      //对象变量定义，是{}
      user : {},
      //字符串变量定义，是''
      name : '',
      //数字变量定义，是0
      age : 0,
      //数组变量定义，是[]
      arr : [],
      //list集合对象(对象数组)，是[{}]
      userList : [{}],
      //定义登录表单的验证规则
      loginRules : {
        //定义账号的验证规则，规则可以有多个，所以是数组
        loginAct : [
          { required: true, message: '请输入登录账号', trigger: 'blur' }
        ],
        //定义密码的验证规则，规则可以有多个，所以是数组
        loginPwd : [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 16, message: '登录密码长度为6-16位', trigger: 'blur' }
        ]
      }
    }
  },


})
</script>

需要加入这个属性

ref=”loginRefForm”

表示在提交之前 需要执行一下规则

1
<el-form ref="loginRefForm" :model="user" label-width="120px" :rules="loginRules">

image-20240221130953823

1
this.$refs.loginRefForm.validate( (isValid) => {

这个会调用:rules=”loginRules”规则 ，然后得到一个返回值，就是一个验证之后的结果。

如果是true 表示验证通过

​ 验证通过后 ，就表示要提交了。axios 。ajax

反之表示没通过

step4: 使用axios //封装

主要就是封装4个方法；

doGet() 查询

doPost() 新增

doPut() 修改

doDelete() 删除

  1. 创建文件与文件夹

image-20240221140148575

  1. 封装函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    // 原本这个函数是只有function 但是因为要在别的页面上使用，所以就加上了一个export，这里导出
    //那边导入
    // 从这个框架导入组件
    import axios from "axios";

    export function doGet(url ,params){
        axios({
            method: "get",
            url: url,
            params: params, //{name: "对的", age: 22},
            dataType:"json"
        }).then(function (rep){
            var s ="";
            reo.data.forEach(function (stu){
                s += stu.name + "-------------------"+stu.age+"<br>";
            });
            document.getElementById("mydiv").innerHTML = s;
        })


    }

    export function doPost(url,data ){
        axios({
            method: "post",
            url: url,
            data: data, //{name: "对的", age: 22},
            dataType:"json"
        }).then(function (rep){
            var s ="";
            reo.data.forEach(function (stu){
                s += stu.name + "-------------------"+stu.age+"<br>";
            });
            document.getElementById("mydiv").innerHTML = s;
        })


    }
    export function doPut(url,data ){
        axios({
            method: "put",
            url: url,
            data: data, //{name: "对的", age: 22},
            dataType:"json"
        }).then(function (rep){
            var s ="";
            reo.data.forEach(function (stu){
                s += stu.name + "-------------------"+stu.age+"<br>";
            });
            document.getElementById("mydiv").innerHTML = s;
        })


    }
    export function doDelete(url ,params){
        axios({
            method: "Delete",
            url: url,
            params: params, //{name: "对的", age: 22},
            dataType:"json"
        }).then(function (rep){
            var s ="";
            reo.data.forEach(function (stu){
                s += stu.name + "-------------------"+stu.age+"<br>";
            });
            document.getElementById("mydiv").innerHTML = s;
        })


    }

step4: 使用axios //封装

一般提交是使用一个表单，然后用put提交，也可以用get 但是一般用put

1
2
3
在httpRequest.js开始处
//定义端口的地址，默认地址前缀，
axios.defaults.baseURL = "http://localhost:8089";

（5）动力云客后端项目创建

image-20240221145546841

image-20240221150859764image-20240221150910929

image-20240221150924045

（6）编写yml配置文件

进入image-20240222102204105

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
server:
  port: 8089//端口 这里改成了8089
  servlet:
    context-path: /

#配置数据库连接相关信息
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/dlyk?useUnicode=true&characterEncoding=utf8&useSSL=false//这里是链接数据库
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: 123456
    hikari:
      #最大连接数，默认是10
      maximum-pool-size: 30
      #最小空闲连接，默认是10
      minimum-idle: 30
      #等待连接池分配连接的最大时长，超过该时长还没有可用连接则发生超时异常（单位毫秒）
      connection-timeout: 5000
      #空闲连接的最大时长，空闲多久就被释放回收，设置为0不让连接回收
      idle-timeout: 0
      #一个连接的最大生命时间，超过该时间还没有使用就回收掉（单位毫秒），最好不要超过8小时
      max-lifetime: 18000000


  #配置redis的连接信息
  data:
    redis:
      host: 127.0.0.1//redis的host 要去看redis的配置。
      port: 6379
      password: 123456
      database: 1

  #设置jackson返回json数据时，时区和格式
  jackson:
    time-zone: GMT+8
    date-format: yyyy-MM-dd HH:mm:ss

#指定一下mapper.xml文件的位置
mybatis:
  mapper-locations: classpath:mapper/*.xml
  configuration:
    #在控制台打印sql语句
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

#定义定时任务的调度时间
project:
  task:
    cron: '* */5 * * * *'
    delay: 180000

（7）mysql反向工程生成表

image-20240222102505798

image-20240222102955294

注意：Free Mybatis plugin 直接在setting –> plugin 搜索下载就行，然后选中数据库里面的所有表，点击mybatis generator ，

image-20240222120628352

生成结果

image-20240222120824860

(8)加入mapper包的扫描

在image-20240222121147528

加入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package com.bjpowernode;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

//！！！！！！！！！！ 加入这个
@MapperScan(basePackages = {"com.bjpowernode.mapper"})
@SpringBootApplication
public class DlykServerApplication {

    public static void main(String[] args) {
        SpringApplication.run(DlykServerApplication.class, args);
    }

}

此外 ，由于mapper的xml（sql语句文件）与mapper不在一个文件夹下面，所以需要指定一下，在application.yml中指定

1
2
3
4
5
mybatis:
  mapper-locations: classpath:mapper/*.xml
  configuration:
    #??????sql??
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl