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 来设定地图的位置
336
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
