[JavaScript知识库]谷粒学苑 —— 3、后台系统前端项目创建

目录

1、项目的创建和基本配置

1.1、创建项目

1.2、下载依赖

问题：npm install 一直失败

1.3、启动项目

1.4、项目的目录结构

2、初始项目修改

2.1、关闭使用 Esline 代码规范

2.2、登录页修改

2.3、标题

2.4、国际化设置

2.5、icon

2.6、导航栏文字

2.7、面包屑文字

3、将登录功能临时改造为本地登录

3.1、修改项目基础请求地址

3.2、登录注意事项

3.3、开发接口

3.4、修改前端登录接口地址

3.5、解决跨域问题

3.5.1、什么是跨域

3.5.2、方案一：使用 @CrossOrigin 注解解决

3.5.3、方案二：使用网关

1、项目的创建和基本配置

1.1、创建项目

将资料中的 vue-admin-template 解压，并复制到工作区

1.2、下载依赖

在根目录下打开终端

npm install

问题：npm install 一直失败

下载依赖时报错

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: vue-admin-template@3.8.0
npm ERR! Found: html-webpack-plugin@4.0.0-alpha
npm ERR! node_modules/html-webpack-plugin
npm ERR!   dev html-webpack-plugin@"4.0.0-alpha" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer html-webpack-plugin@"^3.0.0" from script-ext-html-webpack-plugin@2.0.1
npm ERR! node_modules/script-ext-html-webpack-plugin
npm ERR!   dev script-ext-html-webpack-plugin@"2.0.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\zhang\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\zhang\AppData\Local\npm-cache\_logs\2022-10-03T11_56_16_019Z-debug-0.log

可能是由于 npm 版本过高造成的，需要将 npm 降低版本

npm install npm@6.14.8 -g

降低后又报错

npm ERR! Windows_NT 10.0.19044
npm ERR! argv "D:\\node.js\\node.exe" "C:\\Users\\zhang\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v16.17.0
npm ERR! npm  v3.8.6
npm ERR! code EMISSINGARG

npm ERR! typeerror Error: Missing required argument #1
npm ERR! typeerror     at andLogAndFinish (C:\Users\zhang\AppData\Roaming\npm\node_modules\npm\lib\fetch-package-metadata.js:31:3)
npm ERR! typeerror     at fetchPackageMetadata (C:\Users\zhang\AppData\Roaming\npm\node_modules\npm\lib\fetch-package-metadata.js:51:22)
npm ERR! typeerror     at resolveWithNewModule (C:\Users\zhang\AppData\Roaming\npm\node_modules\npm\lib\install\deps.js:455:12)
npm ERR! typeerror     at C:\Users\zhang\AppData\Roaming\npm\node_modules\npm\lib\install\deps.js:456:7
npm ERR! typeerror     at C:\Users\zhang\AppData\Roaming\npm\node_modules\npm\node_modules\iferr\index.js:13:50
npm ERR! typeerror     at C:\Users\zhang\AppData\Roaming\npm\node_modules\npm\lib\fetch-package-metadata.js:37:12
npm ERR! typeerror     at addRequestedAndFinish (C:\Users\zhang\AppData\Roaming\npm\node_modules\npm\lib\fetch-package-metadata.js:82:5)
npm ERR! typeerror     at returnAndAddMetadata (C:\Users\zhang\AppData\Roaming\npm\node_modules\npm\lib\fetch-package-metadata.js:117:7)
npm ERR! typeerror     at pickVersionFromRegistryDocument (C:\Users\zhang\AppData\Roaming\npm\node_modules\npm\lib\fetch-package-metadata.js:134:20)
npm ERR! typeerror     at C:\Users\zhang\AppData\Roaming\npm\node_modules\npm\node_modules\iferr\index.js:13:50
npm ERR! typeerror This is an error with npm itself. Please report this error at:
npm ERR! typeerror     <http://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     D:\VSCode\project\guli\npm-debug.log

还是报错，可能是 Node.js 版本与 npm 版本无法对应，查看与 6.14.8 对应的 Node.js 版本：以往的版本 | Node.js?，这里选择14.9.0，然后将版本降低即可，降低版本：Node.js升级或降低版本_傻狍子学前端的博客-CSDN博客_nodejs降低版本

1.3、启动项目

在项目目录的终端中执行以下命令?

npm run dev

1.4、项目的目录结构

. 
├── build // 构建脚本
├── config // 全局配置 
├── node_modules // 项目依赖模块
├── src //项目源代码
├── static // 静态资源
└── package.jspon // 项目信息和依赖配置

src 
├── api // 各种接口(定义调用方法)
├── assets // 图片、css等静态资源 
├── components // 各种公共组件，非公共组件在各自view下维护 
├── icons // svg icon(图标)
├── router // 路由表 
├── store // 存储 
├── styles // 各种样式 
├── utils // 公共工具，非公共工具，在各自view下维护 
├── views // 各种页面
├── App.vue // 项目顶层组件 
├── main.js // 项目入口文件 
└── permission.js // 认证入口

2、初始项目修改

2.1、关闭使用 Esline 代码规范

修改在 config 下的 index.js 的?module.exports 的 useEsline 的值为 false

useEslint: false

2.2、登录页修改

src/views/login/index.vue（登录组件）

4行

<h3 class="title">谷粒学院后台管理系统</h3>

28行

<el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
    登录
</el-button>

2.3、标题

index.html（项目的html入口）

<title>谷粒学院后台管理系统</title>

2.4、国际化设置

打开 src/main.js（项目的js入口），第7行，修改语言为?zh-CN，使用中文语言环境，例如：日期时间组件

import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

2.5、icon

复制?favicon.ico 到根目录

2.6、导航栏文字

src/views/layout/components/Navbar.vue

13行

<el-dropdown-item>
    首页
</el-dropdown-item>

17行

<span style="display:block;" @click="logout">退出</span>

2.7、面包屑文字

src/components/Breadcrumb/index.vue

38行

meta: { title: '首页' }

3、将登录功能临时改造为本地登录

3.1、修改项目基础请求地址

config/dev.env.js 第 7 行，注意是 http

BASE_API: '"http://localhost:8001"',

3.2、登录注意事项

登录底层调用的是?src\store\modules\user.js 中的?Login(登录)、GetInfo(登录后获取用户信息) 方法，所以我们需要创建对应的两个接口，其中：

• Login(登录) 方法主要获取 token
• GetInfo(登录后获取用户信息) 方法需要获取用户的角色、名称、头像信息

src/utils/request.js 中的 34 行定义了请求成功需要返回的状态码为 20000，非 20000 为抛错，还定义了其他状态码的含义

3.3、开发接口

在 service_edu 的 controller 下创建

@RestController
@RequestMapping("/eduservice/user")
public class EduLoginController {

    /**
     * 本地登录方法
     * @return
     */
    @PostMapping
    public R login(){
        return R.ok().data("token", "admin");
    }

    /**
     * 本地登录后获取用户信息
     * @return
     */
    @GetMapping
    public R info(){
        return R.ok()
                .data("roles", "[admin]")
                .data("name", "admin")
                .data("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
    }

}

3.4、修改前端登录接口地址

修改 src/api/login.js 的?login 和?getInfo 方法的 url 为自己写的接口地址

3.5、解决跨域问题

3.5.1、什么是跨域

跨域是指通过一个地址去访间另外一个地址，这个过程中如果有以下三个地方有任意一个不一样，就是跨域

• 访问协议
• ip 地址
• 端口号

3.5.2、方案一：使用 @CrossOrigin 注解解决

在 Controller 上添加注解 @CrossOrigin 注解

@RestController
@RequestMapping("/eduservice/user")
@CrossOrigin    // 解决跨域问题
public class EduLoginController {
}

3.5.3、方案二：使用网关

等待补充...