1.vue的创建

        vue的项目创建

                1.1 vue create vue_name

                1.2 Babel  Router(路由) CSS Pre-processors 

                        路由可通过：npm i vue-router@3.5.2 -S 下载

                1.3less

                1.4 In dedicated config files

         1.5 启动命令：npm run serve  端口号在vue.config。js中配置 devServer

        1.6当缺失依赖时  npm install 下载  【根据：package-lock.json下载】

      1.7  并在mian。js中导包

//  npm install axios 下载axios  get请求

import axios from 'axios'

Vue.prototype.request=axios

// https://element.eleme.cn/#/zh-CN/component/pagination#dai-you-bei-jing-se-de-fen-ye

//npm i element-ui -S 下载element-ui

// ElementUI 组件

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

// 引入echarts

//下载 npm install echarts@4.9.0

import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts

import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 解决ElementUI导航栏中重复点菜单报错问题

const originalPush = VueRouter.prototype.push

VueRouter.prototype.push = function push(location) {

    return originalPush.call(this, location).catch(err => err)}

1.8 添加地图时 在 index.html 加入        <script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=百度地图密钥"></script>

2.idea的创建

    建立后端工程-CSDN博客        2.2 建立后端工程-CSDN博客    

get 请求

        const { data: res1 } = await axios.get(`api/T_USERContrller/isuserexist`, {

          params: {

            name: this.form.name, }, });

        console.log(res1);

        this.isuserexist1=res1;

post请求：

      let params={

          name:this.form.name,

        };

        const data = new FormData();

        for (let k in params) {          data.append(k, params[k]); }

        this.request({

          method: "post",

          url: `api/T_USERContrller/isuserandpwdexist`,

          data,

        }).then((res)=>{  })

post 无法添加await  无法解决数据延迟问题，如果使用get后依旧无法解决，直接把嵌套方法 

    get延迟数据问题：（在类中使用 async 局部刷新，await要等待（没有async ，await无法使用））

一、用户登录界面

1.编写用户名栏和密码栏 使用 show-password 用于密码栏，切换是否可视

2.编写 表单的规则 

                2.1用户名：必填，长度大于1~20，失去焦点验证

                2.2 密码 必填

3.验证用户名 定义方法

        3.1vue:{

        当用户栏失去焦点时触发

        如果密码栏为空，则不执行

        否则通过  isuessrexist get方法 async 局部刷新  get请求（await，防止数据延迟）传入用户名 返回给isuserexist1 ，

}

        3.2java:{

                在控制层中调用isuserexist传入（name）

                -》sevice 接口 -》seviceImp（实现类）（接口回调）-》mapping（判断当前的名字是否在数据库中是否存在且delFlg 为0【可使用】

）

}

4.验证密码

        4.1vue{当点击登录按钮时 传入 用户名 和密码 通过【isuserandpwdexist】方法判断

        只有当后端返回 【密码存在】时触发

        设置 【isdengluok】为ok（全局守卫）【有登录权限】

        并传递用户名【username】 ，

this.$router.push跳转页面

        否则返回 后端传递的名字并使用alter显示

5.点击注册后，跳转注册页面

6.在页面mouted时     使用sessionStroge  获取注册页面中的username 并将 pwd设置为空

}

java：{

                在控制层中调用方法传入（name，pwd）

                -》sevice 接口 -》seviceImp（实现类）（接口回调）-》mapping（判断当前的名字及密码在数据库中是否存在且delFlg 为0【可使用】

}

二、用户注册界面

        1验证用户名{

          1.1自定义用户名规则

              在表单中设置：model="fromname"来设置传递的from值；

                设置 ：rules："rules" 来自定义规则

        rules：{[name:{validator:validatorame}，trigger: "blur"]}

        在data中设立 设置正则 【纯数字：/^[0-9]*$/】【数字英文结合： /^[A-Za-z0-9]+$/】

                                                【开头为字母：/^([A-Z]|[a-z][A-Za-z0-9]*)$/】

               当用户不为纯数字，只包含数字字母，且为字母开头时 用户通过

        1.2使用登录界面中的判断用户名是否存在（失去焦点）

2.验证密码

        2.1自定义密码

                如果输入的密码是存数字报错

2.2 注册被点击

        当点击注册按钮时 判断 用户是否以存在（用户栏失去焦点方法），用户是否通过（自定义规则），密码是否通过（密码设置 ）通过后插入数据库（insertUser）

}

java{

        1.写入创建时间   

        

Date dt =new Date();
SimpleDateFormat ft = new SimpleDateFormat ("yyyyMMdd");
t_user.setCreateTime(ft.format(dt));

        2.存入用户名和密码 t_user传入（t_user实体类）写入用户名 密码 创建时间，id自增，delFlg默认为0，

        3.注册成功后 清除缓存 sessionStorage.clear()，设置username（保存用户界面），返回登录界面

}

三、.router ->index.js

        1.导入文件  import Maincarousel from '../views/Maincarousel'

        2.设置路径const router=[{

                1.普通路径：  {  path:'/maincarousel ', name:'sellerdiagram',component:Maincarousel },

                2.嵌套路径：  {  path:'/maincarousel ', name:'sellerdiagram',component:Maincarousel，

                                           redirect:{name:'系统首页'},//重定向到子页面轮播图，隐藏真正的页面

                                                   children：[{path:'maincarousel',name:'系统首                                                                          页',component:Maincarousel, meta: { title: "系统首页" },},] //title动态面包屑展示内容            }

                3.全局守卫

                        router.beforeEach(to,from,next){//to从哪来，from到哪去，next原本跳转的路径

         

                         var routerarr=[];//      设置数组

                        routerarr.push('/path');// 插入

                        for 循环遍历，如果to.path在数组中 判断isdengluok是否为"ok"

                                是则next（）；

                                   否则跳回注册页面

                                }

}]

四、主界面的构成

        1.主界面结构

                通过 el-aside el-head  elmain构成        

                el-aside  侧边栏  导入路径  在components中注册

                el-head 动态面包屑（待续）导入路径  在components中注册

                在el-main 设置</router-view> 内容站位符 获取侧边栏本应跳转后的内容

        2.注销按钮 

                在页面加载时获取  sessionStroge  的usrname 属性 并展示 通过div布局

                       当注销按钮被点击后 使用 this.$confirm 来显示提示信息当确定后清除用户名缓存

                        清除登录权限缓存 跳转到注册页面

3.动态面包屑

                3.1 面包屑的链接符 separator-class

                3.2  自动生成

                          <el-breadcrumb-item style="color: green;"

  v-for="(v, i) in breadList"  :key="i" :to="v.meta.path">{{ v.meta.title }}</el-breadcrumb-item

                3.3创建方法

                                3.31.获取当前的多级路由

                                        let matched = this.$route.matched;

                                3.3.2将当前的多级路由存到路由数组中

                                3.3.3在created时调用这个方法

                                3.3.4监听router watch{$router(){this.fangfa}}

     

4.侧边栏

        菜单（el-menu）:属性

                        1.:default-active="activexitongshouye" 当初次进入时展示的页面

                        2. router 通过路由跳转必要的属性，通过index来跳转页面

    5.轮播图           el-carousel

                   1.     :interval="3000"  毫秒数轮换

                    2.  图片路径：         

        <el-carousel-item v-for="item in image" :key="item">

          <img            ref="image"  :src="require('@/image/' + item)"   class="img" >

        </el-carousel-item>// @为src文件夹

         image:['banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg'],

                3.鼠标进入后图片不停止轮播

                        @mouseenter.native="delHandleMouseEnter"

                        

                      delHandleMouseEnter() {

                  this.$refs.carousel.handleMouseEnter = () => { };

                      },

                  在mouted中再次调用

         五、用户管理中的用户列表

                        1.查询

   form 使用：model来获取数据  input 使用v-model 获取每行的数据

                table：用：data指定数据数据  字段使用prop获取对应的值

                                   1.查询前

                                1.1 通过名字，创建时间和更新时间进行查询

                                         <template slot="prepend">名字</template>  v-modle:""

                                1.2当点击查询前 先通过插入的数据获取总条数

                                                后判断 当数据不足当前页且 当前页不为1时（防止死循环）判断

                                                如果当数据不足当前页的向下取整大于等于1时

                                                        将向上取整的数据赋予页数（防止取不到最后一页）

                                                否则将页数赋值为1

                                        调用页数改变时的参数赋值为修改后的页数 @current-change:

                               1.3 当条数改变时也调用页数改变时的方法并赋值为1 防止页数过大

                                                        @size-change

                                1.4 页数改变是 将改变后的页数赋值给页数，调用查询

                                2.查询 

                                                2.1点击查询后先获取总条数，post 传入后端

                                              在后端          分页操作             

                                           将返回的数据付给        userDate（表格）

                       java {

                                1.总条数为 count（*）

                                2.所有数据为  sql的字段as实体类的字段 返回的为 list集合

                                 在Service层

                        PageHelper.startPage(ys.ts)；

                        查询方法 

                        PageInfo<> pi=new PageInfo<>(list)

                               将分页后的数据返回给前端}

                      2.分页数据

                                          2.1el-table属性   

                                   数据来源     ：data="tablename "         直接有后端传递

                                值传递： prop为表格对应的值

                                分页：el-pagination

                                                条数列表 ：page-sizes="[2,3,5]"

                                                默认         ：page-size

                                                el-button被点击时会将整行数据直接传入（scope.row）

                        3.添加用户数     el-dialog  属性

                                        3.1 title 标题

                                        3.2 ：visible.sync  可见性

                                        3.3:before-close 确认关闭之前

                                        3.4 通过传入的数据 insert 进入数据库

                                获取当前的时间      

                                        Date dt =new Date();SimpleDateFormat ft = new SimpleDateFormat("yyyyMMdd");ft.format(dt)

                        4.修改数据

                                4.1设定 一个新的el-dialog 

                                                当点击编辑后 传入本行数据

                                                通过该行的所有数据  获取其的id 并通过id再次查询数据

                                                将后端的数据返回给前端的更新表单

                                  4.2对表单的数据更新完成后 将数据 传递给后端

                                                获取当前时间  并通过id来进行修改，

                                4.3 触发点击按钮

                        5.删除数据

                                与修改数据同理 通过id删除(将对应的dleflg变为1)

                        6.表单定义规则后

                                this.$refs[formName].validate((valid)

                                => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return                                 false; }

六、用户列表中的修改密码

                1.自定义规则

                2.当原密码正确时 输入密码存在

                3.当新密码符合规则后判断新密码的强度

                4.当确认密码和新密码相同时 输出 与修改后的密码一致        

                5.点击重置按钮 清空3个数据

                  6.当三个都满足后 且点击登录后 保留当前用户名，取消登录权限，跳转到登录界面

        七、用户信息

                通过当前的用户名获取id后展示

八、商品管理

                1.基本操作与用户表一致

                2.上传文件

                                1.在添加用户界面 使用 list-type指定文件的类型

                                        使用：on-change 来获取对应的文件

                                                this.insertseller.imgFile =file.raw;

                                2.当点击按钮后提交表单 要添加请求头 并在数据中加上config

                                               对应java：{

                                                        1.获取类型为 MultipartFile

                                                        获取名 getOriginalFilename

                                                        加密 ：1.时间戳通过substring，和lastindexof 刨除后缀

                                                                        获取时间戳

                                                                        拼接

                                                        添加文件到本地：创建path 设置value属性指定本地路径

                                                                                        File file = new File(path, filename);

                                                                                          如果没有使用mkdirs来强制创建路径                                                      

                                                                                              multipartfile.transferTo(file);

                                                            清除添加表单的图片：通过upload上reft属性                                                                                                                   this.$refs['upload'].clearFiles();

                                    3.表格下载图片

                                                使用template 标签   中的slot-scope="scope"来设置改行的内容

                                                将img中的 :src属性变 为:src="'http://localhost:8086/upload/'+scope.row.photo"（photo为该表格的字段）（从后端直接获取） （下载路径  registry.addResourceHandler）

}

                        4.更新数据

                                        4.1更新数据前

                                                通过从后端返回的数据名设置url

                                                let url='http://localhost:8086/upload/'+res.data[0].photo

                                        加入fileList

                                       this.fileList=[];

                                         this.fileList.push({'url':url})

                                        el-upload设置 :file-list="fileList" 直接传入

                                        4.2更新数据

                                                与添加数据的文件传输一致

                        

                3.批量删除

                        3.1在分页表格上添加@select-change="method"属性【当行被选中或取消选中后将更新后的行数据付给multipleSelection】

                        3.1使用：disbale 判断点击列表的个数 如果==0 则不可用

                         3.2 否则的话遍历multipleSelection 将它的id付给arr1，

                                将arr1传入后端，循环设置对应的id的dleflg为1并更新 更新时间

九、数据分析

                1.        直接通过后端来查询 地区和对应个数（通过新建实体类直接返回）

                2.let myChart= this.$echarts.init(this.$refs.mainbar);（mainbar为div的ref属性）

                3.在xAxis使用data 设置x轴坐标

                        在yAxis 使用series 设置y轴坐标值和图标类型

                                使用myChart.setOption(option）

                

                

十、地图

                通过this.point 来设定地图的位置