vue开发后台管理系统
文章平均质量分 58
vue开发后台管理系统(纯实战,从0到1)
高秉文
从前端到后端到项目部署,全栈学习。系统学习各种知识,进而进阶java架构师。
展开
-
09 路由守卫对url鉴权
登陆后,从后台加载出当前登录用户的信息1 登录信息实体类package com.grm.entity;import java.io.Serializable;import java.util.List;/** * 登录用户信息(用户名+头像,菜单列表) * * @author gaorimao * @date 2022/02/10 */public class LoginUserInfo implements Serializable { /** * 用户名原创 2022-02-16 14:22:38 · 1746 阅读 · 0 评论 -
08 完善头部,加入首页菜单
<!-- 头部导航 --> <el-header> <strong>小高后台管理系统</strong> <div class="header-avatar"> <el-avatar size="medium" :src="currentUser.headImg"></el-avatar> <el-d...原创 2022-02-02 09:50:48 · 1211 阅读 · 1 评论 -
07 动态菜单栏
1 左侧菜单栏静态数据改为动态数据1 后台数据<script>export default { data() { return { menuList: [ { name: "SysManga", title: "系统管理", icon: "el-icon-s-operation", path: "", component: "",原创 2022-01-30 22:08:50 · 2997 阅读 · 0 评论 -
06 主页编写
1 挑选elementui布局查看源代码,替换到项目中,代码如下<template> <div id="index"> <el-container> <el-aside width="200px">Aside</el-aside> <el-container> <el-header>Header</el-header> <原创 2022-01-21 10:48:28 · 410 阅读 · 0 评论 -
05 登录接口联调
1 前端发送axios,请求登录接口之前我们讲过axios,那么我们直接运用,代码如下:在前端页面,进行登录,查看效果发现存在几个问题,(1)请求url,http:localhost:9001 其实属于项目根路径,发送axios时没必要一直重复书写,还存在一个问题就是不同环境的ip+端口不一致,我们在开发环境是http:localhost:9001,到了生产环境可能是http://10.1.1.1:7777等,那么我们不可能一直改所有axios请求的代码,所以要把根路径提取出来,.原创 2021-12-25 05:26:45 · 2824 阅读 · 1 评论 -
04 登录校验,引入Message消息提示
1 参数校验(1)用户名校验 规则:用户名必须是6-10位之间的字母 正则表达式[A-Za-z]{6,10}写个java代码验证下:import java.util.regex.Matcher;import java.util.regex.Pattern;public class RegexTest { public static void main(String[] args) { // 6-10位之间的字母 ...原创 2021-12-25 04:25:15 · 726 阅读 · 0 评论 -
03 编写登录页面
1 编写最外层div样式,让其html上下左右居中#login { position: absolute; width: 500px; height: 400px; top: 50%; left: 50%; margin-top: -200px; margin-left: -250px; border: 1px solid red;}刷新页面看下效果在elementui官网找一个表单案例把代码copy到Login.vue中...原创 2021-12-23 21:06:04 · 2953 阅读 · 3 评论 -
02 认识vue项目
1 项目结构2 集成element-uielment-ui官方文档npm i element-ui -Ssrc/main.js中引入element-uiimport Element from 'element-ui'import "element-ui/lib/theme-chalk/index.css"Vue.use(Element)在src/App.vue中,写一个button按钮,测试一下是否起作用<el-button type="war..原创 2021-12-23 14:01:46 · 1397 阅读 · 1 评论 -
01 新建一个vue项目
1 安装vscode新建一个项目用vscode打开,打开一个新的terminal2 安装node2-1 查看版本node -v2-2 安装淘宝镜像源npm config set registry https://registry.npm.taobao.org3 vue-cli 安装依赖包卸载老版本npm uninstall vue-cli -g安装新版本npm install -g @vue/cli查看刚才安装的vue-..原创 2021-12-23 11:56:16 · 528 阅读 · 0 评论