vue

• vue是一个前端框架，是在前后端分离这样的业务场景诞生的。vue是基于node.js来运行的。vue有2.0、3.0版本。vue它的底层是html、css、js，它是一套构建用户界面的渐进式（javascript）框架。并提供了⼀套声明式的、组件化的编程模型，帮助你⾼效地开 发⽤户界⾯。⽆论是简单还是复杂的界⾯，Vue 都可以胜任。
• 渐进式：没有太多的限制的一个js框架。就是一开始使用这个框架，你不需要完全的掌握它的全部的功能或者特性。
• 前后端分离介绍： 前后端分离属于开发模式中的⼀种，其核⼼思想是前端项⽬采⽤（node.js实现）和后端项⽬能够 独⽴运⾏，前端采⽤ajax 向服务器发送请求，服务器只需要提供请求的地址（api）即可协作开 发。这样的项⽬ 称做前后端分离项⽬。

安装node.js

下载 | Node.js 中文网 官⽹

1、双击安装包，⼀直点击下⼀步。

2、点击change按钮，更换到⾃⼰的指定安装位置，点击下⼀步（不修改默认位置也是可以的 ）。

3、⼀直点击下⼀步，最后安装成功即可。

安装完成后：控制台输入 node -v ---- 查看是否安裝成功

构建⼀个vue项⽬

控制台输⼊指令：

npm init vue@latest

这⼀指令将会安装并执⾏ create-vue，它是 Vue 官⽅的项⽬脚⼿架⼯具

如果不确定是否要开启某个功能，你可以直接按下回⻋键选择 No。在项⽬被创建后，通过以下步骤安装依赖并启动开发服务器：

cd

命令自动下载这些依赖。

npm install

运行vue项目

npm run dev

当你准备将应⽤发布到⽣产环境时，请运⾏：

npm run build

1、VUE工程结构

• node_model：项目依赖文件夹，存放的是一些vue功能依赖的模块。
• public：存放的是一些公共的静态资源文件。
• *src：程序员自己存放的源代码（自己编写的代码）
• assets：存放静态资源文件。js.css等
• components：组件：存放的是一些公共的组件（非路由组件）
• App.vue：vue的页面文件，默认vue项目启动后访问的页面。
• *main.js：程序的入口文件。vue项目启动最先执行的文件。
• package.json：包管理工具，记录项目引用的第三方资源库
• package-lock.json：记录第三方资源库的来源。

2、vue页面组成

主要由三个部分组成

•  ————编写逻辑代码、js代码

• ————编写页面代码。html代码

• ————编写样式代码，css代码块

3、VUE生命周期

指的是vue界面从创建到销毁的一个过程。（vue实例创建、初始化、运行、销毁）

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法（钩子函数）。

4、VUE基础语法

声明数据、声明函数（方法）

<template>
  <div>
    <h1>这是我的第一个vue页面h1>
​
    
    <span>姓名:{{name}}span><br>
    <span>年龄:{{age}}span><br>
    <span>备注:{{desc}}span><br>
    
    <span v-html="sex">span><br>
    
    <p v-if="age<18">这是一个未成年的程序员p>
    <p v-else-if="age<30">这是一个成年的程序员p>
    <p v-else>年到中年，小心被裁员p>
​
    <p v-if="status==0">未支付订单p>
    <p v-else-if="status==1">已发货订单p>
    <p v-else>已完成订单p>
​
    
    
    
    <p v-for="c in color" :key="c">{{c}}p>
    <p v-for="user in userList" :key="user.id">
      {{user.name}}今年{{user.age}}岁，他/她是一位{{user.sex}}性
    p>
​
    
    
    <button v-on:click="count++">点击count次数改变button>
    <p>count点击次数：{{count}}p>
    
    <button v-on:click="clickTotal1(5)">点击total1+numberbutton>
    <p>total计数器：{{total}}p>
    <button v-on:click="clickTotal2('哈撒给！！')">点击textbutton>
    <p>text：{{text}}p>
  div>
template>
​
<script>
//声明数据————这是一个固定格式
export default {
  //data() ： 一般设置一些页面上常用的参数
  data(){
    return{
      name:'2Eua',
      age:23,
      desc:'菜狗子Java程序员一枚',
      sex:'
男
',
      status:0,
      color:['白色','蓝色','紫色','黑色','橘色'],
      userList:[
          {'id':1,'name':'Bit','age':22,'sex':'男'},
          {'id':2,'name':'Simple','age':25,'sex':'男'},
          {'id':3,'name':'Niko','age':28,'sex':'男'}
      ],
      count:0,
      total:0,
      text:''
    }
  },
  methods:{
    //第一种方法的声明
    //每点击一次按钮，total加五
    //函数传递参数和js写法是一样的。
    //数字参数直接传递，
    clickTotal1:function (number){
      this.total+=number
    },
    //第二种方法的声明
    //字符串类型的参数需要添加单引号''
    clickTotal2(text){
      this.text = text
    }
  }
}
script>
​
<style>
style>

5、组件

• 组件其实就是一个vue页面，它与vue普通页面是完全相同的。

• 唯一区别：组件可以被多个地方进行调用。普通页面只能调用一次。

• 组件提高import进行导入。import时只需要指明组件的名称和路径即可。

• 为了区分组件和普通界面，在vue项目里组件一般放在components文件夹下。而普通页面一般放在view或者是pages文件夹下。

写一个组件vue界面

<template>
  <h1>{{msg}}h1>
template>
​
<script>
export default {
  //组件名称
  name: "TestComponent",
  //定义组件的参数
  //props组件里的一个属性（字段），期望参数从调用方传递过来
  props:{
    msg:''
  },
   data(){
    return{
    }
  },
  methods:{
  }
}
}
script>
​
<style scoped>
​
style>

导入组件

<template>
  <div>
    <h1>这是我的第一个vue页面h1>
    
    <TestComponent msg="这是一个测试组件">TestComponent>
  div>
template>
​
<script>
  //导入组件
  // TestComponent：组件名称
  //from "./components/TestComponent.vue"：组件的路径
  import TestComponent from "./components/TestComponent.vue";
​
//声明数据————这是一个固定格式
export default {
  //表示引入组件
  components: {TestComponent},
script>
​
<style>
style>

6、路由

路由指的是在vue项目里具体呈现给用户的是哪一个页面，那么这个时候就是通过路由来进行控制的。注意：在vue项目里，很多时候路由都是嵌套在App.vue页面的，然后只需要更新app.vue里具体显示页面的部分即可。路由也是一种局部刷新，达到页面的跳转效果。

安装路由

命令：

cnpm install --save vue-router（所谓的渐进式）

save表示把路由的依赖添加到package.json里。

"dependencies": {
 "vue": "^3.2.45",
 "vue-router": "^4.1.6"
},

7、npm和cnpm命令的区别和联系

两者都是用于node插件的，安装、卸载、以及依赖管理nmp这个命令安装插件时都是从国外的服务器进行下载的，经常受网络影响，可能会出现异常，所以很多时候我们也是用cnpm来进行下载。cnpm是由淘宝团队提供的镜像地址进行下载的。国内的淘宝镜像称为cnpm。两者语法类似。在国内使用cnpm下载效率高于npm。

8、路由的代码书写

在app.vue中通过显示路由内容。

简单来说就是通过url显示⻚⾯的功能。

1、新建pages包，在这个包里新建两个vue界面（Login.vue和Register.vue）路由传参

<template>
  <div>
    <h2>用户登录h2>
    账号:<input type="text"><br>
    密码:<input type="password"><br>
    <span>id:{{id}}名称:{{name}}年龄:{{age}}性别:{{sex}}span>
    <input type="button" value="登录">
  div>
template>
​
<script>
export default {
  name: "Login",
  //页面创建时调用
  //常常再打开一个新页面时通过该方法来渲染页面，动态改变页面的数据
  created() {
    //通过路由得到请求参数
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;
    this.age = this.$route.query.age;
    this.sex = this.$route.query.sex;
  },
  data(){
    return{
      id:0,
      name:'',
      age:0,
      sex:''
    }
  }
}
script>
​
<style scoped>
​
style>
<template>
<div>
  <h2>用户注册h2>
  邮箱:<input type="email"><br>
  性别:<input type="radio">男
      <input type="radio">女<br>
  生日:<input type="date"><br>
  密码:<input type="password"><br>
  确认密码:<input type="password"><br>
  <input type="button" value="注册">
div>
template>
​
<script>
export default {
  name: "Register"
}
script>
​
<style scoped>
​
style>

2、新建一个router路由目录（包），在这个目录下新建index.js和routes.js文件

配置index.js

//用来配置路由管理器
//导入路由管理器——路由里自带的
import{createRouter,createWebHistory} from "vue-router";
//导入自己写的路由
//import后跟的是文件中的元素，如果是vue页面，那么就是页面的别名
// from跟的是文件的路径
//调用时该文件里的元素需要导出export default '元素'
import routes from "./routes";
​
//配置路由管理器
const router = createRouter({
    //配置路由不需要带用#号
    history:createWebHistory(),
    routes
});
//导出后其它组件可以调用
export default router;
//用来配置路由信息的
const routes = [
    {
        //给当前路由起别名
        name: "Login",
        //配置访问路径
        path: "/login",
        //配置当前页面的具体路径
        component: () => import('../pages/Login.vue')
    },
    {
        //给当前路由起别名
        name: "Register",
        //配置访问路径
        path: "/register",
        //配置当前页面的具体路径
        component: () => import('../pages/Register.vue')
    }
]
// const text = [{
//     name:'xxx',age:10
// }]
​
//导出后其它组件可以调用
export default routes;
//如果需要多个导出，使用括号拼成数组格式
// export default {routes,text};

3、main.js 前端的配置文件。在main.js配置路由

import { createApp } from 'vue'
import App from './App.vue'
​
import './assets/main.css'
​
//启用路由
//导入路由管理器的配置
import router from "./router/index";
//导入axios
import axios from "axios";
​
//当前主页面里启动/使用路由配置：createApp(App).use(router)
//createApp
//create 表示创建一个实例
//App是application这个单词的缩写，表示应用这个实例
//mount('#app')：表示将一个id为app的节点挂载到vue上
createApp(App).use(router).use(axios).mount('#app')

4、接下来写主界面App.vue

<template>
  <div>
    <button @click="loginPage()">登录button>
    <button v-on:click="register()">注册button>
  div>
  <div>
    <router-view>router-view>
  div>
​
  <div>
    <router-link :to="{ name:'Login',query:{id:2,name:'坤坤',age:28,sex:'男'}}">
      修改
    router-link>
    <a href="/login">跳转a>
  div>
template>
​
<script>
  //导入组件
  // TestComponent：组件名称
  //from "./components/TestComponent.vue"：组件的路径
  import TestComponent from "./components/TestComponent.vue";
  import axios from "axios";
​
//声明数据————这是一个固定格式
export default {
  //表示引入组件
  components: {TestComponent},
  created() {
    axios.post('http://localhost:8080/user/login',null).then(res=>{
​
    })
  },
​
  //data() ： 一般设置一些页面上常用的参数
  data(){
    return{
    }
  },
  methods:{
    //跳转到登录页面
    loginPage(){
      //跳转到指定的页面
      //直接跳转到某个页面
      // this.$router.push("/login")
      //跳转页面并且向目标页面传递参数
      this.$router.push({
        //name 表示当前页面的别名
        // 跳转到名字叫做Login的页面
        name:'Login',
        //query是传递的参数。可以是多个
        query:{
          id: 1,
          name: "chw",
          age: 23,
          sex: "男"
        }})
    },
    register(){
      this.$router.push("/register")
    }
  }
}
script>
​
<style>
style>

9、在vue路由里$router和$route的区别

$router对象它是全局路由对象的实例。是router构造方法的实例。是它可以控制整个路由的页面跳转。

$route对象表示当前的路由对象信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。这个对象一般用来获取当前跳转路由的相关参数。

10、axios

Vue里，通常使用axios向服务器发出AJAX请求。

Axios，可以工作于浏览器里，也可以在node.js使用。

主要功能有：

1、发送ajax请求到服务器端，服务器端响应数据到浏览器端

2、自动转换JSON

在vue中使⽤axios

vue中使⽤axios需要安装：npm install axios

11、跨域问题

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

跨域是指客户端浏览器发送http请求时，由于浏览器自身存在的安全机制（同源策略），浏览器会检查请求中的（协议，域名（ip），端口号）。判断当前请求的（协议，域名（ip），端口号）和当前页面的（协议，域名（ip），端口号）是否相同。如果不相同，浏览器会对当前的请求进行限制。这个限制叫做跨域。

• 只要协议、域名、端口里有一种不一样那么都会存在跨域。

• 一般跨域问题常出现在前后端分离的系统里。而且服务器之间不存在跨域问题。

axios解决跨域问题

1、使用配置代理的方式解决。

因为浏览器同源策略机制，前后端分离后客户端请求服务端的数据时，会存在跨域问题。而服务器和服务器之间是可以相互请求数据的，是没有跨域的概念的，也就是说我们可以配置一个代理的服务器，由这个代理服务器收到客户端请求，将请求转发给另一个服务器，然后把请求出来的数据返回到代理服务器里，再由代理服务器返回数据给我们的客户端。这样就实现了跨域访问数据。

Vue3.0解决⽅案：vite.config.js中进⾏配置一个代理服务器：

import { fileURLToPath, URL } from 'node:url'
​
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
​
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  //配置服务和代理
  server:{
    //配置本地端口
    port:8000,
    //配置代理信息
    proxy:{
      //配置请求映射路径：只要是以/api开头的请求都使用下面得配置信息
      '/api':{
        //配置目标服务器地址
        target:'http://localhost:8088',
        // 允许跨域
        changeOrigin: true,
        //url重写
        rewrite:(path)=>path.replace(/^\/api/,'')
      }
    }
  }
})
​
/*
rewrite 叫做请求url重写：配置代理之后客户端向服务器发送请求
（地址：目标服务器+映射地址）http:localhost:8088/api/user/login
代理服务器最终请求得地址为：http:localhost:8088/user/login
 */

2、注解@CrossOrigin解决跨域问题

服务端通过在controller控制器的class类上配置注解@CrossOrigin来解决跨域问题。

组件和页面的区别：

1、组件其实就是一个vue的页面，它跟vue普通页面是完全相同的。

2、唯一区别是，组件可以被多个地方进行调用。而普通页面只能调用一次。

3、在vue项目里，组件一般放在components文件夹下。而普通页面一般放在pages文件夹下，或者view文件夹下。

4、页面是直接和URL对应，或者说是和“大”URL对应的，里面不做具体的功能，而是放各种组件，负责组件之间的关联关系。

5、组件负责实现具体的功能。页面包括组件。

12、VUE双向绑定

基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。

双向绑定是指当数据模型数据发生变化时，页面展示的数据会随之发生变化，而如果页面中的数据发生变化时，绑定的模型数据也随之发生变化。

Element-UI

Element-Ul是饿了么前端团队推出的⼀款基于Vue.js 的桌⾯端UI框架。⼿机端有对应框架是Mint UI Vue框架：它是对js的封装，Element-UI 它是基于Vue的框架，它封装了css样式，我们使⽤Vue需要样 式的时候就使⽤它。 丰富的组件，⾃定义主题，国际化。 提供友好的⽂档和 demo，维护成本⼩ ⽀持 npm ⽅式

安装使用

官⽹： 一个 Vue 3 UI 框架 | Element Plus

下载：

Vue使⽤element-ui 需要使⽤element-plus

npm install element-plus --save

cnpm install element-plus --save

配置： 在main.js里导入，并且use，挂载

//引入elementui-plus
import elementUI from 'element-plus'
//引入elementui-plus得样式
import 'element-plus/dist/index.css' // 样式依赖
//引入elementui-plus里的图标
import * as ElIcons from '@element-plus/icons-vue' // 引⼊图标
​
const app = createApp(NewApp);
​
// createApp(App).use(router).use(elementUI).mount('#app')
​
//遍历添加图标组件
for (const icon in ElIcons){
    app.component(icon,ElIcons[icon])
}
//挂载
app.use(router).use(elementUI).mount('#app')

elementUI的布局

  <el-row style="background-color: aquamarine">
      <el-col :span="24">
        <h2>这是布局得头部h2>
      el-col>
  el-row>
  <el-row>
    <el-col :span="4" style="background-color: sienna">
      <h2>导航栏h2>
    el-col>
    <el-col :span="20" style="background-color: pink">
      <el-row>
        <el-col :span="12" style="background-color: blueviolet"><h2>嵌套1h2>el-col>
        <el-col :span="12" style="background-color: olivedrab"><h2>嵌套2h2>el-col>
      el-row>
    el-col>
  el-row>

  <el-button type="primary">主要按钮el-button>
  <el-button type="success">成功按钮el-button>
  <el-button type="info">信息按钮el-button>
  <el-button type="warning">警告按钮el-button>
  <el-button type="danger">危险按钮el-button>

<el-button type="primary" icon="Edit" />
  <el-button type="primary" icon="Share" />
  <el-button type="primary" icon="Delete" />
  <el-button type="primary" icon="Search">Searchel-button>
  <el-button type="primary">
    Upload<el-icon class="el-icon--right"><Upload />el-icon>
  el-button>

  <el-radio-group v-model="sex">
    <el-radio label="1">男el-radio>
    <el-radio label="0">女el-radio>
  el-radio-group>

  <el-checkbox-group v-model="likeArray">
    <el-checkbox label="1">打篮球el-checkbox>
    <el-checkbox label="2">踢足球el-checkbox>
    <el-checkbox label="3">玩游戏el-checkbox>
    <el-checkbox label="4">敲代码el-checkbox>
  el-checkbox-group>
 
 
<el-button type="success" icon="Upload">增加按钮el-button>
<el-button type="danger" icon="Delete">删除按钮el-button>
<el-button type="info" icon="Search">查询按钮el-button>
<el-button type="warning" icon="Edit">修改按钮el-button>

复选框的动态产生

  <el-checkbox-group v-model="studyArray">
    <el-checkbox :label=lesson.id v-for="lesson in lessonArray" :key="lesson.id" >{{lesson.lessonName}}el-checkbox>
  el-checkbox-group>
​
studyArray: [],
lessonArray: [
        {id:1,lessonName:'JavaWeb'},
        {id:2,lessonName:'SpringBoot'},
        {id:3,lessonName:'Mybatis'}
      ]

 下拉列表

  <el-select v-model="edu" placeholder="请选择学历" @change="eduChange()">
    <el-option label="高中" value="1">el-option>
    <el-option label="大专" value="2">el-option>
    <el-option label="本科" value="3">el-option>
    <el-option label="研究生" value="4">el-option>
  el-select>

日期选择框

  <el-date-picker v-model="startTime" type="date" value-format="YYYY-MM-DD"
                  placeholder="请选择开始时间" @change="timeChange()">
  el-date-picker>
  {{this.startTime}}
 
  
  <el-date-picker v-model="endTime" type="datetime" value-format="YYYY-MM-DD hh:mm:ss"
                  placeholder="请选择结束时间" @change="endTimeChange()">
  el-date-picker>
  {{this.endTime}}

表格

  <el-table :data="userList" stripe>
    <el-table-column prop="id" label="ID">el-table-column>
    <el-table-column prop="name" label="名称">el-table-column>
    <el-table-column prop="sex" label="性别">el-table-column>
    <el-table-column prop="address" label="家庭地址">el-table-column>
  el-table>

表格数据从后台获取

1、页面：

  <el-table :data="bookList" stripe>
    <el-table-column prop="id" label="ID">el-table-column>
    <el-table-column prop="name" label="书名">el-table-column>
    <el-table-column prop="author" label="作者">el-table-column>
    <el-table-column prop="desc" label="描述">el-table-column>
    <el-table-column prop="price" label="价格">el-table-column>
    <el-table-column label="数量">
      <template #default="priceTemp">
        <el-input v-model="priceTemp.row.number">el-input>
      template>
    el-table-column>
    <el-table-column label="总价">
      <template #default="sumTemp">
        {{sumTemp.row.price * sumTemp.row.number}}
      template>
    el-table-column>
 
    <el-table-column prop="status" label="状态">
      <template #default="scope">
        
        {{ scope.row.status==1?'可售':'不可售'}}
      template>
    el-table-column>
    <el-table-column prop="createTime" label="创建时间">el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="deleteBook(scope.row.id)">删除el-button>
      template>
    el-table-column>
  el-table>

2、ajax请求

<script>
import axios from "axios";
 
export default {
  name: "NewApp",
  created() {
    axios.post('/chw/book/bookList',null).then(resp=>{
      this.bookList = resp.data;
    })
  },
  data(){
    return{
      bookList: []
    }
 
  },
  methods:{
    deleteBook(id){
      alert(id);
    }
  }
}
script>

3、bean

@Data
@NoArgsConstructor
@AllArgsConstructor
public class BookBean {
    private int id;
    private String name;
    private String author;
    private String desc;
    private String createTime;
 
    private int status;//0：代表禁用，1：代表开放
 
    private double price;
    private int number;
 
}

4、控制器

@RestController
@RequestMapping("/book")
public class BookController {
    @RequestMapping("/bookList")
    public List getBookList(){
        BookBean bookBean = new BookBean(1,"JavaWeb","张三","javaweb应用","2022-12-09",1,77.5,3);
        BookBean bookBean1 = new BookBean(2,"MySQL","李四","MySQL","2022-12-08",0,60.5,10);
        BookBean bookBean2 = new BookBean(3,"Oracle","王五","Oracle","2022-12-05",1,89.5,9);
        BookBean bookBean3 = new BookBean(4,"SpringBoot","赵六","SpringBoot","2022-12-11",0,48.5,5);
        BookBean bookBean4 = new BookBean(5,"SpringMVC","孙七","SpringMVC","2022-12-22",0,66.5,6);
 
        List bookBeanList = new ArrayList<>();
        bookBeanList.add(bookBean);
        bookBeanList.add(bookBean1);
        bookBeanList.add(bookBean2);
        bookBeanList.add(bookBean3);
        bookBeanList.add(bookBean4);
        return bookBeanList;
    }
}

对话框

  
  
  <el-dialog v-model="dialogVisible" title="添加用户" width="30%">
    <span>这是一个添加用户操作span>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">取消el-button>
        <el-button type="primary">确定el-button>
      span>
    template>
  el-dialog>
  <el-button type="primary" @click="dialogVisible=true">打开对话框el-button>

导航栏、分页、验证规则、对话框

<template>
  <el-row style="background-color: pink">
    <el-col :span="24"><h1>这是首页标题h1>el-col>
  el-row>
 
  <el-row>
    <el-col :span="6" style="background-color: aqua">
      
      
      <el-menu class="el-menu--vertical-demo"
               text-color="#3014ADFF"
                default-active="2-1"
                background-color="#5EE069FF">
        
        
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <User/>
            el-icon>
            <span>用户管理span>
          template>
          
          <el-menu-item index="1-1">注册用户el-menu-item>
          <el-menu-item index="1-2">用户列表el-menu-item>
        el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <View/>
            el-icon>
            <span>角色管理span>
          template>
          
          <el-menu-item index="2-1">角色列表el-menu-item>
          <el-menu-item index="2-2">角色修改el-menu-item>
        el-sub-menu>
      el-menu>
    el-col>
 
    <el-col :span="18" style="background-color: blueviolet">
      <h2>内容h2>
 
    el-col>
  el-row>
 
  <el-dialog v-model="dialogVisible" title="添加用户" width="30%">
    
    
    
    
    
    <el-form :model="userForm" :rules="rules" ref="userForm" class="demo-ruleForm">
      
      
      <el-form-item label="姓名" prop="userName">
        <el-input v-model="userForm.userName">el-input>
      el-form-item>
      <el-form-item label="密码" prop="passWord">
        <el-input type="password" v-model="userForm.passWord">el-input>
      el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="userForm.sex">
          <el-radio :label="1">男el-radio>
          <el-radio :label="2">女el-radio>
        el-radio-group>
      el-form-item>
      <el-form-item label="电话号码" prop="tel">
        <el-input v-model="userForm.tel">el-input>
      el-form-item>
      <el-form-item label="生日" prop="birthday">
        <el-date-picker type="date" value-format="YYYY-MM-DD"
                        v-model="userForm.birthday" placeholder="请选择生日">
        el-date-picker>
      el-form-item>
    el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="cancel()">取消el-button>
        <el-button type="primary" @click="addUser()">确定el-button>
      span>
    template>
  el-dialog>
  <el-button type="primary" @click="dialogVisible=true">打开添加用户对话框el-button>
 
  
  
  
  
  
  <el-pagination
      @size-change="changeSize"
      @current-change="changeCurPage"
      :current-page="curPage"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
  el-pagination>
template>
 
 
<script>
import axios from "axios";
import {ElMessage} from "element-plus";
 
export default {
  name: "App1206",
  data() {
    return {
      curPage: 1,
      pageSize: 10,
      total: 100,
 
      userForm: {
        userName: '',
        passWord: '',
        birthday: '',
        sex: 0,
        tel: ''
      },
      dialogVisible: false,
      //验证规则
      //1：给表单加上rules——属性——规则
      //2：给表单的每行元素el-form-item加上prop属性，注意prop属性名称和表单标签的v-model里的名称要一致。
      //3：声明验证的规则，也就是声明的rules变量
      // required:是否必须，message：提示消息，trigger：blur：失去焦点时触发
      rules: {
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 2, max: 8, message: '用户名长度为2-8位', trigger: 'blur'}],
        tel: [
          {required: true, message: '请输入电话号码', trigger: 'blur'},
          {pattern: /^1[3578]\d{9}$/, message: '电话必须是13、15、17、18开始的十一位数', trigger: 'blur'}]
      }
    }
  },
  methods: {
    changeCurPage(curPage) {
      alert(curPage);
    },
    changeSize(pageSize){
      alert(pageSize);
    },
    cancel() {
      this.dialogVisible = false;
      //重置表单
      this.$refs.userForm.resetFields();
    },
    addUser() {
      //最常用方法第二种----传递表单
      axios.post('/chw/user/addUser', this.userForm).then(response => {
        if ("success" == response.data) {
          ElMessage({
            message: '用户添加成功。',
            type: 'success',
          })
          //关闭弹窗
          this.dialogVisible = false;
          //清空表单
          //第一种方式（清空表单）
          /*this.userForm = {
            userName: '',
            passWord: '',
            birthday: '',
            sex: 0
          }*/
          //第二种方式（重置表单）
          //第一步，给当前form表单新增一个ref属性
          //第二步，给需要清空的表单标签el-form-item加上prop参数
          //第三步，重置表单
          //设置一个名叫userForm的表单元素，重置所有的表单，重置不是清空
          //重置是重置回声明表单时的值
          this.$refs.userForm.resetFields();
        } else {
          ElMessage({
            message: '用户添加失败。',
            type: 'failed',
          })
        }
      });
 
/*      //传递对象。formData对象_扩展
        let param = new FormData();
        param.append("userName",this.userForm.userName)
        param.append("sex",this.userForm.sex)
        param.append("birthday",this.userForm.birthday)
        param.append("passWord",this.userForm.passWord)
        axios.post('/chw/user/addUser',param).then(resp=>{
         if ("success" == resp.data){
          ElMessage({
         message: '用户添加成功。',
         type: 'success',
          })
       }
    });*/
 
      /*// 第三种
      let param = JSON.stringify(this.userForm);
      // 设置当前请求数据内容的类型为json字符串
      let config = {
        headers: {
          'Content-Type': 'application/json'
        }
      }
      axios.post('/chw/user/addUser',param,config).then(resp => {
        if ("success" == resp.data) {
          ElMessage({
            message: '用户添加成功。',
            type: 'success',
          })
        }
      });*/
    },
  }
}
script>
 
<style scoped>
style>