搭建项目前端环境

1、安装相关软件

1.1 安装Nodejs

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。简单的说Node.js 就是运行在服务端的 JavaScript。

中文网：http://nodejs.cn/

LTS：长期支持版本

Current：最新版

node -v  #如果可以看到版本号，证明安装成功

1.2 安装vscode

1.2.1 下载地址

https://code.visualstudio.com/

1.2.2 创建项目

vscode本身没有新建项目的选项，所以要先创建一个空的文件夹，如project_xxxx。
然后打开vscode，再在vscode里面选择 File -> Open Folder 打开文件夹，这样才可以创建项目。

1.2.3 保存工作区

打开文件夹后，选择“文件 -> 将工作区另存为…”，为工作区文件起一个名字，存储在刚才的文件夹下即可

1.2.4 设置字体大小

左边栏Manage -> settings -> 搜索 “font” -> Font size

2、导入前端项目

2.1 Vue 脚手架介绍

Vue-cli(俗称：Vue 脚手架)是 vue 官方提供的、快速生成 vue 工程化项目的工具。
特点：
① 开箱即用
② 基于 webpack
③ 功能丰富且易于扩展
④ 支持创建 vue2 和 vue3 的项目

2.1.1 创建并运行项目

#全局安装命令行工具
npm install --location=global @vue/cli
#创建一个项目
vue create vue-test #选择vue2
#进入到项目目录
cd vue-test
#启动程序
npm run serve

2.1.2 访问项目

默认8080端口
http://127.0.0.1:8080/

2.2 vue-admin-template介绍

GitHub地址：https://github.com/PanJiaChen/vue-admin-template

（1）vue-element-admin是基于Vue和Element-ui 的一套后台管理系统集成方案。vue-admin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。
（2）Vue是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
（3）element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建。

2.3 复制项目到工作区

把端前端代码 ssyx-admin 复制到工作区

2.4 下载项目依赖

npm install

2.5 启动前端项目

npm run dev

3、改造登录功能

3.1 登录接口

package com.atguigu.ssyx.acl.controller;

import com.atguigu.ssyx.common.result.Result;
import io.swagger.annotations.Api;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.TimeUnit;

@RestController
@RequestMapping("/admin/acl/index")
@CrossOrigin     //跨域
public class IndexController {

    /**
     * 1、请求登陆的login
     */
    @PostMapping("login")
    public Result login() {
        Map<String,Object> map = new HashMap<>();
        map.put("token","admin-token");
        return Result.ok(map);
    }

}

3.2 获取用户信息接口

/**
     * 2 获取用户信息
     */
    @GetMapping("info")
    public Result info(){
        Map<String,Object> map = new HashMap<>();
        map.put("name","atguigu");
        map.put("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
        return Result.ok(map);
    }

3.3 退出登录接口

 /**
     * 3 退出
     */
    @PostMapping("logout")
    public Result logout(){
        return Result.ok();
    }

3.4 修改前端整合登录

3.4.1 修改src -> api -> user.js

修改为本地接口路径

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/admin/acl/index/login',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    url: '/admin/acl/index/info',
    method: 'get',
    params: { token }
  })
}

export function logout() {
  return request({
    url: '/admin/acl/index/logout',
    method: 'post'
  })
}

3.4.2 修改utils -> request.js

修改响应状态码是200

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data

    // 修改为200   if the custom code is not 20000, it is judged as an error.
    if (res.code !== 200) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

3.4.3 修改.env.development

修改接口路径为本地

# just a flag
ENV = 'development'

# base api
# VUE_APP_BASE_API = '/dev-api'
# 修改为本地接口地址
VUE_APP_BASE_API = 'http://localhost:8201'