游戏网站建设与策划书,哪家开发app公司好,快站官网平台,将制作好的网站上传去因特网本文章转载于【SpringBootVue】全网最简单但实用的前后端分离项目实战笔记 - 前端_大菜007的博客-CSDN博客
仅用于学习和讨论#xff0c;如有侵权请联系#xff0c;将源码补充写的更快哦#xff01;#xff01;#xff01;等一会把源码补一下哦#xff01;
拿一个项目看…本文章转载于【SpringBootVue】全网最简单但实用的前后端分离项目实战笔记 - 前端_大菜007的博客-CSDN博客
仅用于学习和讨论如有侵权请联系将源码补充写的更快哦等一会把源码补一下哦
拿一个项目看看登录进去之后看到了一个初始页面 右上角点注销可以退出页面 1、看一下我们功能菜单项 1.1第一个用户管理这里面可以做增删改查默认会查出第一页数据也可以带条件查询 1.2 带条件查询效果 1.3 点一下可以做用户数据的新增 1.4 数据新增的样子 1.5 删除数据 1.6 本次案例使用的技术 2、数据库建表语句以及初始语句都要整理到一个文件夹里 3、自己常要保存文件笔记软件素材源码 4、实现前后端分离第一件事情创建好数据库以及创建好数据库的项目表设计项目前提前想好要设计的表有哪些 5、接下来搭建前端项目搭建前端项目前先创建环境必须要做有这些
先搭建一个node环境那个Vue脚手架版本太高不行有兼容问题只能比版本低 5.1 下载下载vue-admin-template这个东西是啥后台前端解决方案
https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/ 5.2 版本很多第一种集成方案第一种功能特别多建议用基础模板可以后期扩展如果点不开可以到该链接下查笔记
源码https://gitee.com/green_vegetables/x-admin-project.git 素材https://pan.baidu.com/s/1ZZ8c-kRPUxY6FWzsoOOjtA 提取码up4c 项目概述笔记https://blog.csdn.net/m0_37613503/article/details/128961102 数据库笔记https://blog.csdn.net/m0_37613503/article/details/128961401 前端笔记https://blog.csdn.net/m0_37613503/article/details/128961447 后端笔记https://blog.csdn.net/m0_37613503/article/details/128961569 5.3 我下这个版本 5.4 接下来项目初始化 5.5 找个不带中文的文件把那个框架解压一下 5.5 框架一览 5.6 帮你做个请求拦截器和响应拦截器 5.7 响应拦截器就是我们后端发请求给前端 前后端有个对接标准如果你返回的不是两万认定你是失败的
5.7视图组件 5.8 main.js是我们入口的配置文件 5.9生产配置测试配置 5.10 需要那些依赖 6、安装依赖 6.1 npm install 一下 6.2 把项目运行一下,npm run dev 6.3 项目部署成功了默认部署在9528这个端口上 6.4 简单的淘宝布局 6.5 修改一下端口和语法校验参数 6.6 我们来修改一下配置 6.6.1 修改一下端口 不处理多写个空格都报语法错误 改成false 把模拟服务给修改掉 6.6.2 给他改一下标题 其他的这个删掉 6.6.3 标题改的是哪里 就是这个你想改他可以用搜索框去搜他 搜他我们改他改的是路由里的 把他改成首页 6.6.4 修改之后我们要重新部署一下才行
6.6.5 输入新的端口重新改一下 7、登录页面修改在view下的login中 7.1修改内容 7.2 改成中文 7.3 找到登录窗给他改成中文 7.4 密码的输入框给它改成中文的密码 7.5 登录按钮给他改一下 7.6 末尾的内容 7.7 校验提示删掉 7.8 密码校验我们可以修改 暂时我们不动
7.9 密码和初始值要跟数据库里对应 7.10 修改后的样子 8、给登录页面加一个背景图 8.1 点一下页面看一下提示在组件中找到这个提示器对他进行修改 8.2 找到我们登录组件index.vue,就是这个
8.3 刚才的大组件就是他 8.4 背景颜色是在这里定义的 8.5 将图片放到as..文件夹下给他弄一张背景图 用background-image:url(xxx)导入背景图片 用background-size:100%,可以平铺 效果 8.6 这里我想让他下来一点 8.7 效果调试有点偏 上下边距不一样会出现偏差
8.8 改小之后就发现出现的问题变小了 8.9 给他加一个背景颜色 8.10 圆角设置 8.11 给他加一个透明度 8.12为什么会出现请输入正确用户名 9、导航条组件修改 9.1 这里我可能写一个公司主页我可能要链接到公司主页里 9.2 实例 9.3 10、前端菜单初始化 10.1 新建文件夹系统管理主要是用户管理
10.2 新建user.vue和role.vue软件 10.3 新建textVue组件 10.4 路由配置文件 这个标题就是这个位置 图标就是文件夹的图标 10.5 如果你想要用自己图标打击svg,点击右键在资源管理器 10.6 用自己的图标 变成了我自己的图标了 10.7 修改一下用户标题 10.8 全部修改内容 10.9 修改效果 10.10 删掉部分不需要的内容到404前面 10.11 把系统管理部分再写一遍复制 11、修改标签栏导航 用搜索去搜索一下这里 11.1效果 12、点一下快捷导航 12.1 这里要到继承导航里去找 12.2 第一步找到APPMain.VUE的文件 12.3 找到这个文件 12.4 把这一行标签给改了 12.5 复制刚才的代码 12.6定义一下计算属性 12.7 到admin的继承文件中把他的配置文件给找到 12.8 在我们的素材文件夹中有这些相应的文件 12.9 在我们component问价下将TagsView文件复制粘贴 12.10 将我们js文件放到store/module文件下 12.11 修改文件store/getters.js文件 12.12 放到我们的store的gitee下面文件夹当中 12.13 把他放到我们的全局管理器当中 12.14 引用一下这个tagView这个文件 12.15 先导入这个组件再注册这个组件最使用这个组件复制getter.js文件 把他放到该位置 12.16 使用一下该组件 13.在我们components/index.js文件下做一下导出 13.1 找到index这个文件做一下导出 13.2 Ctrl D可能快捷键是这个将项目重启一下 13.3 bug /deep/ ---这里我要找到这个地方给他换一种写法 13.4 把双冒号替换成 V-什么什么 v-deep
13.5 用鼠标点一下这个文件 给他改一下 这里也可能跟node版本有问题升级之后说有问题这里改完后项目重启一下ctrl d
13.6 最终效果就是有选项卡了方便性就更好了 13.7 这个首页上你可以限制他不让他关闭 13.8 如果你想加某个属性不让他关闭你就可以加一个affix属性 首页上加一个属性 首页不能加X了 14、登录接口梳理就拿这个登录页面来说我们要准备几个接口以后关于接口你就可以划分多少功能一个功能有多少接口 14.1 你还得思考接口的路参和返回参是什么样子的 14.2 我们登录需要三个接口先按F12 14.3 我们点击登录同时摁住F12,看一下我们会发出那些请求 14.4 点了登录之后他做了两件事一个发了login请求一个做了info请求 14.5 查看请求参数-----点一下请求然后点击右侧payload就行这里他把用户名和密码发送过去了。 14.6 查看他发送的地址到浏览器的请求头地址上这里他发送的地址moke请求地址 14.7 看一下他响应的结果也是一个json这里的流程是传入用户名和密码然后到后台验证你的用户名和密码是否正确如果正确就生成一个token,返回一个token给前端 14.8 数据格式是怎样的 14.9看一下info的请求来将他进行一下对比这里info添加了参数后端需要做的事情是验证你这个token是否有效。14.10 15.到json.cn网站中进行json.cn格式的转化 15.1 这样就帮你转了
15.2 我们登录还有一个接口点一下注销
15.3 注销点了之后也会发出请求把token给带过去 15.4 我们后台拿到token之后就可以返回给前端给他返回一个success的请求 15.5 返回一个接口接口的作用就是返回数据你想到接口你就应该想到接口有哪些数据。 15.6 我们除了要关注接口还要关注路参和请求方式只要再塑造三个接口实现前端和后端那么他们关系就打通了就能够实现前后端分离了。
