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 来设定地图的位置