GAARA

一.vue项目打包并部署到nginx服务器(window环境)1.项目打包对于通过vue-cli脚手架创建的项目在根目录cmd,并输入打包命令2.nginx的html文件夹下粘贴打包好的项目文件3.在有nginx.exe的页面cmd,输入命令开启服务器4.其他把dist文件中的文件粘贴到HTML文件夹下面配置nginx配置结束后重新加载二.使用宝塔面板部署vue项目1.宝塔面板介绍

一.服务器介绍1.服务器和PC电脑的区别2.获取服务器3.常见服务器分类4.使用服务器的步骤(阿里云)二.正向代理,反向代理,负载均衡和动静分离1. 什么是正向代理?2.什么是反向代理?3.什么是负载均衡?4.什么是动静分离?三.nginx服务器0.介绍和常见用途1.nginx官网和下载2.安装和启动3.常见命令

文章目录1.添加一个删除用户的接口`./api/deleteuser`2.给卡片区的"删除"按钮绑定点击事件3.实现绑定的点击事件deleteUser4.效果5.完整代码6.知识点1.添加一个删除用户的接口./api/deleteuser /****deleteusers接口:删除前台提交的用户信息****/ app.get('/api/deleteuser', (req, res) => { const { id, query, pagen

一.新增接口`../api/updateuser`用于修改用户信息1.vue.config.js中添加一个修改用户信息的接口:`../api/updateuser`二."修改信息"弹出框的实现2.新建一个el-dialog标签,作为修改信息的对话框3.加入数据结构:在data中声明控制对话框显示和隐藏的变量三.把该弹出框绑定给卡片区中的"添加"和"删除"按钮4.对卡片区中的"操作"中的两个按钮:"添加"和"删除"绑定点击事件5."添加"和"删除"绑定的点击事件实现相应功能7.el-

1.最终效果2.粘贴官网代码到el-card标签下面(即Users.vue页面最下面)3.调整成自己想要的样式4.调整对话框的显示和隐藏5.给对话框添加表单样式6.添加用户的表单验证以及自定义的验证规则步骤代码校验规则写法一校验规则写法二(更常用)效果7.点击"确定"按钮提交表单给对话框中的''确定"按钮绑定点击事件submit在vue.config.js写一个添加用户的接口:`./api/addusers`"确定"按钮中绑定的点击事件enter()中添加接口请求效果8.完整

0.当前的搜索框只有样式,没有绑定事件1.在vue.config.js写一个接口`./api/search`,用于搜索功能2.在el-input中绑定事件3.在methods中写这个search()方法4.效果5.遇到的bug0.当前的搜索框只有样式,没有绑定事件在这里插入图片描述1.在vue.config.js写一个接口./api/search,用于搜索功能 /****research接口:搜索功能****/ app.get("./api/search",(req,res)=>{

零.用户列表中的"状态"和"操作"加上相关按钮1.效果2.样式:在el-table的相关子标签中添加样式3.接口:在vue.config.js中写入新的接口:./api/userupdate4.获取后台返回的数据一.Users页动态分页效果1.复制分页代码粘贴在user页最下方2.改成自己需要的样式3.把total属性(总页数)改为动态绑定3.1.vue.config.js中的**.api/users**接口定义了total3.2.data中声明userlist和total,method

1.element-ui的导航样式组件——面包屑(breadcrumb)1.1.介绍1.2.使用1.3.微调2.element-ui的Other样式组件——卡片(Card)2.1.介绍2.2.回顾:element-ui的基础样式组件——布局(layout)2.3.使用:在el-caid标签中使用栅格系统写搜索框代码难点:使用input slot给文本框内容添加图标效果3.用户列表获取:配置vue.config.js,并从前台获取数据分页好的用户列表3.1.先给上述代码微调css3.

一.使用router-view把home页的Main做成动态渲染,以方便后续动态显示每个侧边栏菜单选项对应的内容1,创建views/welcome.vue页作为home的子路由2.router/index.js中注册为home的子路由3.在home.vue中的Main使用router-view二.动态路由匹配sidebar:点击Aside不同选项,Main也显示对应的内容【难点】1.了解element-ui的`:router`模式2.如何理解上图中的"以index作为path作为路由跳转"?3

0.需求1.动态绑定相应的图标2.遇到的小bug:图标显示不出来3.微调一下icon和字体的间距4.实现功能:点开一个其他自动关闭5.其他小调整6.新增一个点击折叠展开功能

文章目录零.设置路由守卫:需要先登录才能访问其他页面一.使用ElementUI进行home主页快速布局,并设置登录退出功能二.左侧菜单Aside布局1.编写(复制)一个mock接口到vue.config.js2.使用Element-UI的NavMenu功能进行Aside样式布局:抽屉式导航菜单教程代码3.菜单数据的绑定:动态遍历数据[难点]七.知识点1.路由导航守卫有哪些?2.vue插槽的用法————————————————版权声明：本文为优快云博主「前端OnTheRun」的原创

一.登录页面Login.vue的样式1.实现登录页面天蓝色背景色和中间白色登录框2.实现登录框中logo引入并放置在登录框左上角3.使用Element-UI表单功能实现用户密码的输入框样式二.登录页面的规则校验思路代码效果注意事项1.`prop="username"`是为了data中rules的username属性做绑定2.实现验证规则的几个要点:三.登录按钮和重置按钮的功能实现,登录按钮的验证逻辑代码效果:登陆成功后跳转到home页注意事项1.调用refs的resetFiel

项目技术栈和难点使用Vue ui+CMD创建vue项目使用Mockjs进行后端配置:模拟登录,用户管理(增删改查等API接口)使用Element-UI进行快速布局,使用到其布局,菜单,表格等多个组件表格组件:数据绑定和相关属性设置分页组件:传递参数到后端调用接口登录表单:数据绑定和验证及表单重置(自定义验证规则)路由导航守卫:控制访问权限路由重定向以及菜单绑定路由重定向左侧菜单的折叠和展开用户信息的搜索过滤用户列表信息的增删改查