什么是前后端分离
- 前端单独进行部署
- 后端也是单独进行部署
- 两个系统之间使用 JSON 进行传输
建立前端工程
前端是基于 Vue 来进行开发的，所以我本次使用的 UI 为 vue-element-amdin 进行二次开发, 不过使用的是 template 模板 admin 那套内容太多了，所以在这里我将一步一步的来完善该系统
前端使用的开发工具为 WebStorm 可以和我一样也可以不一样，本次编写博主使用的为 WebStorm
UI 模板的目录结构
下载模板，https://github.com/PanJiaChen/vue-admin-template
如果对 Git 了解可以使用 SSH 的方式进行下载，没有的话就直接下载 zip 即可，下载解压之后的效果图如下
在跑起来这个前端之前你需要准备一个东西就是安装 Node.js 看本教程的时候如果你基础不好我建议还是先去学学前面的内容，在来回头看本教程，Node.js 的安装方式参考链接为：https://www.cnblogs.com/BNTang/p/13674486.html
还有就是需要配置一下包的下载源对象，默认是从国外进行下载，博主已经改好了，改到了国内的阿里源，切换方式上图的文章列表当中也有如下图
配置 Node
如上图打开终端，然后下载前端对应的包在终端当中执行如下脚本
代码语言：shell复制# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org配置运行脚本如下图，就不用每次运行都在终端当中自己打对应的运行脚本了
如上如果都配置好了，那么就直接点击启动的按钮启动工程，最终得到的效果图如下
前端开发步骤
路径对应路由, 路由当中会对应我们的页面
添加路由
引入路由的页面
进入到组件当中, 编写页面, 加载对应的 js, 发送网络请求
发送网络请求
在 api 当中创建对应的 js 文件, 定义接口地址参数
前端界面修改
添加 Logo
<img class="logo_img" src="@/assets/logo_image/logo.jpg"/>添加样式
.title {
font-size: 35px;
color: $light_gray;
margin: 0 auto 20px auto;
text-align: center;
font-weight: bold;
display: inline-block;
padding-top: 10px;
}
.logo_img {
width: 60px;
height: 60px;
margin-right: 10px;
vertical-align: top;
}
margin-bottom: 20px;修改 favicon.ico
修改 Title
前端请求流程
替换前端请求服务器地址
编写服务器登录请求接口
/**
* @author BNTang
*/
@RestController
@RequestMapping("/user")
@CrossOrigin
@Api(tags = "用户组")
public class LoginController {
/**
* <p>
* 登录
* </p>
*
* @return 登录成功之后的信息
*/
@PostMapping("/login")
@ApiOperation(value = "登录")
public ResponseResult login() {
return ResponseResult.ok().data("token", "admin-token");
}
/**
* <p>
* 登录之后的用户信息
* </p>
*
* @return 登录之后的用户信息
*/
@GetMapping("/info")
@ApiOperation(value = "获取登录之后的用户信息")
public ResponseResult info() {
return ResponseResult.ok()
.data("roles", "[admin]")
.data("name", "BNTang")
.data("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
}
}在前端调用请求的时候会产生跨域的问题，至于什么是跨域我就不在介绍了，自行问度娘，后续我在出文章进行讲解，目前没有统一的处理跨域所以需要在每一个 Controller 添加一个允许跨域访问的注解就是 @CrossOrigin 没有指定路径，代表当前下的所有都允许跨域访问
然后在修改 user.js 中的 api 为我们自己后台的地址修改文件和修改内容如下图所示
最后
我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！
