开始创建vue项目
vue create app 选择vue2，然后引入router,这是router文件夹
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入登录组件
import Login from '@/components/Login'
import Home from '@/components/Home'
Vue.use(VueRouter)
export default new VueRouter({
routes : [
{path:'/',redirect:'/login'},//重定向
{
//路径 这是登录路由
path:'/login',
component:Login
},{
path:'/home',
component:Home
}
]
})
在main.js中全局注册一下 ，
import Vue from 'vue'
import App from './App.vue'
//引入饿了么ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
//引入路由
import router from './router'
//引入全局样式
import '@/assets/css/app.css'
import store from '@/store'
//引入axions
import axios from 'axios'
//设置一下axios的默认地址
axios.defaults.baseURL='http://175.27.228.178:3434/api/private/v1/'
//这样每个组件都有.$http了
Vue.prototype.$http=axios
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router,
store
}).$mount('#app')
在引入饿了么ui这里是全部引，如上 vuex展示没有用，用到了在引入。
登录发送ajax请求，登录成功后把token存储在sessionStorage中
//发送请求
userLogin() {
this.$refs.logonRef.validate(async (valid) => {
if (!valid) return;
//结构出data 重命名为res
const { data: res } = await this.$http.post(
"login",this.loginfrom
);
console.log(res);
if (res.meta.status == 200) {
this.$message.success('登录成功');
console.log(res);
//保存token到sessionStorage
//1.1项目中出了登录之外的其他的api接口，必须登录之后才能访问
//1.2token 只应在当前网站打开期间生效，所以将token保存在sessionStorage中
window.sessionStorage.setItem('t0ken',res.data.token);
//通过编程式导航跳转到后台主页，路由地址是 /home
this.$router.push('/home');
} else {
this.$message.error('登录失败')
}路由守卫判断 具体实现以及思路
const rouetr= new VueRouter({
routes : [
{path:'/',redirect:'/login'},//重定向
{
//路径 这是登录路由
path:'/login',
component:Login
},{
path:'/home',
component:Home
}
]
})
//挂在路由导航守卫
//to：代表将要访问的路径
//from ：从那个路径跳转而来
//next:是一个函数，表示放行
//next()表示放行 next('/login')表示强制跳转
rouetr.beforeEach((to,from,next)=>{
if(to.path==='/login') return next();
//获取token
const tokenStr = window.sessionStorage.getItem('token');
//判断有没有token,没有强制跳转到登录页面
if(!tokenStr) return next('/login')
//有则直接放行
next()
})
export default rouetr登录了之后实现退出,这里就直接销毁token
具体代码 点击按钮上绑定一个out(）事件
methods:{
out(){
window.sessionStorage.clear();
this.$router.push('/login');
}
}配置文件在根目录下创建 .prettierrc
接下来就是内容布局管理了
布局采用饿了么ui 提供的
接下来一级菜单 发送ajax请求
created ：处于loading结束后，还做一些初始化，实现函数自执行（data数据已经初始化，但是DOM结构渲染完成，组件没有加载）
created() {
//在 created 中，data 和 methods 都已经被初始化好了！
this.getMenuList()
}, //获取所有菜单
async getMenuList() {
//结构并接收
const { data: res } = await this.$http.get('menus')
if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
this.menulist = res.data
},接收好了渲然
<el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
<!-- 一级菜单的模板区 -->
<template slot="title">
<!-- 图标 -->
<i :class="iconimgs[item.id]"></i>
<!-- 文本 -->
<span>{{ item.authName }}</span>
</template>
<!-- 二级菜单 -->
<el-menu-item :index="item2.id +''" v-for="item2 in item.children" :key="item2.id">
<template slot="title">
<!-- 图标 -->
<i class="el-icon-menu"></i>
<!-- 文本 -->
<span>{{item2.authName}}</span>
</template></el-menu-item
>
</el-submenu>一级菜单渲染矢量图标 饿了么内置的
data() {
return {
//左侧菜单数据
menulist: [],
//一级菜单
iconimgs:{
'125':"el-icon-user-solid",
'103':"el-icon-setting",
'101':"el-icon-goods",
'102':"el-icon-shopping-cart-2",
'145':"el-icon-loading"
}
}
},实现侧边栏的
首先添加控件
样式
绑定点击事件
collapse是饿了么的属性，true代表折叠
最后修改侧边栏宽度
饿了么自带折叠动画 这里动态关掉就可以了
让他一进来展示另一个页面，实现路由重定向
创建begin
在路由中引入
重定向
接下来，开启路由，是饿了么自带的 ，他是根据index来判断跳转到那个路由
实现点击那个，那个地方高亮
首先给二级菜单绑定点击事件并获取路由值
点击之后保存在sessionStorage中
在data中声明个对象接收
赋值
动态显示那个组件高亮
现在到绘制组件
头部面包屑 样式写在 assets 下的css中
卡片视图 样式写在 assets 下的css中
如果自己设的样式没效果，可能原来有的权重比较高，后面加个 ！important
绘制卡片内容中的搜索
<el-card>
<!-- 搜索与添加区域 -->
<el-row :gutter="17">
<el-col :span="7">
<el-input placeholder="请输入内容">
<el-button
slot="append"
icon="el-icon-search"
></el-button> </el-input
></el-col>
<el-col :span="4">
<el-button type="primary">添加用户</el-button>
</el-col>
</el-row>
</el-card>现在大致样式
接下来获取用户数据
<script>
export default {
name:'users',
data(){
return{
//获取用户列表参数
querIngo:{
query:'',
pagenum:'1',
pagesize:2
}
}
},
created(){
this.getUserList()
},
methods:{
getUserList(){
//发起ajax请求 get请求参数用params
this.$http.get('/users',{params: this.querIngo})
}
}
}
</script>
接下来获取
<script>
export default {
name:'users',
data(){
return{
//获取用户列表参数
querIngo:{
query:'',
pagenum:'1',
pagesize:2
},
userList:[],
total:0
}
},
created(){
this.getUserList()
},
methods:{
async getUserList(){
//发起ajax请求 get请求参数用params
const {data:res} = await this.$http.get('users',{params: this.querIngo})
if(res.meta.status!==200) return this.$message.error('获取用户列表失败');
this.userList=res.data.users
this.total=res.data.total
}
}
}
</script>渲染列表 采用饿了么内置的
<!-- 用户列表区 -->
<el-table :data="userList" border stripe>
<el-table-column label="姓名" prop="username"></el-table-column>
<el-table-column label="邮箱" prop="email"></el-table-column>
<el-table-column label="电话" prop="create_time"></el-table-column>
<el-table-column label="角色" prop="role_name"></el-table-column>
<el-table-column label="状态" prop="mg_state"></el-table-column>
<el-table-column label="操作" ></el-table-column>
</el-table>给表格加个索引列
状态 ，利用作用域插槽 如下指定了prop跟作用域插槽，prop会被覆盖
<el-table-column label="状态" prop="mg_state">
<template slot-scope="scope">
<el-switch v-model="scope.row.mg_state"></el-switch>
</template>
</el-table-column>接下来是操作栏
<el-table-column label="操作">
<template slot-scope="scope">
<!-- 修改 -->
<el-tooltip class="item" effect="dark" content="修改角色" placement="top">
<el-button type="primary" icon="el-icon-edit"></el-button>
</el-tooltip>
<!-- 删除 -->
<el-tooltip class="item" effect="dark" content="删除角色" placement="top">
<el-button type="danger" icon="el-icon-delete"></el-button>
</el-tooltip>
<!-- 分配角色 -->
<el-tooltip class="item" effect="dark" content="分配角色" placement="top">
<el-button type="warning" icon="el-icon-setting"></el-button>
</el-tooltip>
</template>
</el-table-column>接下来实现分页 这些都是饿了么ui提供的，使用的时候参考官方文档就好了
上面修改状态没有更新搞数据库中 接下来利用饿了么ui监听实现状态改变发送ajax请求去服务端
首先监听 @change是饿了么自带的
//监听 switch 开关状态的改变
async userStates(userinfo){
const {data:res} = await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
console.log(userinfo)
if(res.meta.status!==200) {
//如果啊失败取反，把页面上显示状态调回来否则要刷新页面才行
userinfo.mg_state=!userinfo.mg_state
return this.$message.error(res.meta.msg)
}
this.$message.success('更新成功');
}
},效果图
接下来实现搜索 首先给输入框双向绑定一个值
在给搜索按钮绑定一个点击事件 因为下面getUserList已经包含了输入框里的值所以直接调用
在输入内容后添加clearable就是出现一个删除按钮，饿了么提供一个监听他的事件，就是后面那个，触发了就让它查询全部是实现全部查询。
点击添加用户 弹出一个对话框
首先引入
定义一个字段 用于对话框的显示与隐藏
给确定与取消添加一个点击事件实现隐藏
给添加按钮添加一个点击事件来显示弹出框
接下来添加弹出框中的输入框 ：model是绑定验证数据， ：rules是验证规则
按着这个在多复制几个
接下验证手机号跟邮箱 先定义验证规则在去下面验证
接下点击取消清空输入框 首先给对话框添加一个关闭事件监听，关闭清空from表单
然后给添加用户来一个预验证
给确定按钮绑定点击事件
接下来发送ajax请求来添加用户
现在来渲染修改用户的对话框
通过：visible.sync来控制是否隐藏
定义控制隐藏与显示的值
给修改用户绑定一个点击事件
取消时隐藏
通过id查询信息
首先绑定信息
在data中定义一个对象存储 获取到的对象
把数据填充到表单中 首先把模板写出来 并把数据绑定到这里去
在添加验证规则 因为上面已经定义好了验证规则，这里就直接用
重置修改表单 定义监听事件
利用resetFields重置
修改前的预验证
验证成功后发送put请求修改数据
接下来删除按钮
首先给删除按钮绑定一个点击事件并传一个id过去
然后给用户加一个是否确定删除的提示框
发送请求删除
---------------------------------------------下面是权限管理页面--------------------------------------------
因为在Home主页中已经开启了路由
首先定义一个组件
然后引入
面包屑与卡片
页面挂载时获取数据
接下来渲染数据
根据数据源提供的index进行渲染 利用作用域插槽来进行几级权限路由的展示与隐藏
创建角色列表
注册 使用
发送ajax请求获取数据
渲染页面 下拉列用type="expand"就可以实现
完成效果
接下来处理展开列
渲染一级权限
进行一级权限的美化
渲染二级权限菜单
渲染三级权限
给三级权限添加一个删除
判断用户是否真的删除
实现删除 给删除事件传两个值，
最下面的是别让他删除之后关闭
接下来给一二级删除 直接赋值给 改一下权限管理就OK
接下来点击分配权限弹出对话框并且获取数据
给分配权限绑定点击事件
定义一个数组接收数据与定于一个对象来控制弹出框的隐藏或者显示
这个是权限弹出框的结构内容
获取数据并控制弹出框的显示与隐藏
下面给弹出框加个树状节点
指点一下属性
树形节点优化。 前面添加一个复选框，给定一个id 默认全部打开
给树状节点添加默认的值 是饿了么自带的
给三级权限的id赋值给defKeys
点击分配权限
传当前角色id
首先获取三级权限节点
关闭时清空defKeys：【】 |||||| 监听关闭
实现权限分配管理
首先一点击分配的时候 立即把当前权限id保存到了data中 方便后面使用
点击确定按钮的时候获取到了全选或者半选的id 把他们合并成一个完整的数组 然后做字符串拼接
发送请求
在users页面中去完善分配角色
先定义分配角色对话框
点击分配角色显示对话框 并且把当前用户id传过去
发送请求获取角色列表
数据
绘制下拉菜单并赋值
更新角色信息
给更新按钮绑定事件
发送更新请求
监听对话框是否关闭
添加弹出对话框 并且赋值与添加规则
点击添加弹出对话框
定义值与规则
点击确定按钮添加用户
点击编辑触发并传id过去
获取值并存储在之前定义好的值 并且打开编辑用户对话框
编辑用户对话框并且赋值并添加规则
监听关闭恢复之前的
修改
删除 先判断用户是点击删除还是取消
发送请求
-----------------------------------------以上是权限管理--------------------------------------------------------
给登录页面加一个粒子效果
安装
npm install vue-particles --save
<!-- 背景特效 -->
<vue-particles
class="login-bg"
color="#f4f4f4"
:particleOpacity="0.7"
:particlesNumber="100"
shapeType="circle"
:particleSize="4"
linesColor="#f4f4f4"
:linesWidth="1"
:lineLinked="true"
:lineOpacity="0.4"
:linesDistance="150"
:moveSpeed="3"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push"
/>___________________________商品管理_________________________
创建组件并且渲染页面
页面渲染时获取数据
安装 vue-table-with
npm i vue-table-with-tree-grid -S
import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)
初步使用
：data是数据源 colums是指定列 :selection-type="false"隐藏复选框 :expand-type="false"隐藏下拉菜单 show-index显示前面序号 index-text="#"序号列名 border表格右侧分割线
第二列使用自定义插槽
先定义自定义插槽
在渲染第三跟第四列
分页
在对话框中添加表单
定义对应的数据
获取父级分类列表数据
在展示对话框之后获取父分类的数据
级联选择器
数据
判断分类中父级id与自身id
关闭对话框清空所有数据
预验证通过添加
定义编辑弹出框并获取id
把数据渲染进去
监听编辑对话框
删除按钮 先询问是否删除
删除或者编辑刷新页面时，不能定位打开到原来位置
接下来实现分类参数页面
基本样式
获取分类列表数据
渲染级联选择框
判断是否选中的是三级菜单
绘制tab 页签区域
就是展示选中的那一列
修改选中的值
控制添加按钮的显示与隐藏
获取参数数据 此时只能获取一次切换了就没用了下面解决
绑定切换事件使获取对应数据
首先把获取方法抽离出来
让切换的调用 实现切换数据
获取到的数据判断一下是那个表格的
渲染动态参数表格
渲染静态属性表格
把对话框渲染出来并把数据填充进去
数据
监听对话框关闭
添加数据
绘制修改对话框 把数据填充进去并且监听开关
给静态属性和动态参数都加上点击事件
修改
删除
实现展开行赋值 先获取值把数据分割
使用作用域插槽绘制
把静态属性的展开行复制去动态参数展开行 就行 两个都是复用的
_________________________商品列表__________________________
加载时获取所有列表数据
渲染表格
定义去全局过滤器来转换时间
自定义插槽来显示时间
分页器
搜索与清空
删除
添加商品
基本页面提示与步骤条
美化步骤条
tab栏区域
实现数据联动效果 绑定值
tab栏v-mode自动绑定name属性
用表单把tab包裹起来
绘制输入input框
数据与验证规则
获取商品分类
绘制商品分类级联选择器
控制级联选择器只能选择三级分类
控制跳转
首先给tabs指定一个 :before-leave="beforetableave"
控制tab发起请求
首先给 tabs绑定事件
判断是否选中的动态参数面板，是的发送请求
绘制复选框 样式的优化
获取静态属性
商品属性面板的渲染
渲染上传图片接口
为上传图片手动指定一个请求头 携带一个token
图片上传成功后拿到上传的临时路径
移除图片
实现图片预览效果
添加富文本
首先安装 npm install vue-quill-editor --save
绘制富文本编辑器 并双向绑定到
添加前的表单预验证
使用深拷贝解决类型冲突
首先安装 npm i -save lodash 引入
使用join把数组转为字符串
处理动态参数与静态属性
发送网络请求
成功后进行路由跳转
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
