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 EMISSINGARGnpm 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*/@PostMappingpublic R login(){return R.ok().data("token", "admin");}/*** 本地登录后获取用户信息* @return*/@GetMappingpublic 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、方案二：使用网关

等待补充...

谷粒学苑 —— 3、后台系统前端项目创建相关推荐

关于游戏陪玩系统源码后台管理系统前端项目的思考
开发游戏陪玩系统源码后台管理系统是大部分游戏陪玩系统源码前端开发人员接触过的项目,如何更好的进行项目的搭建.组件的开发.数据结构的设计等等,这些都是需要考虑的问题.以下是我结合一些项目的经历和其他大佬 ...
网易严选后台系统前端规范化解决方案
本文来自网易云社区作者:吴子房背景网易严选经过一年多的快速发展,项目膨胀很快,业务规划上,也到了拆分工作台的时候了.当前一个业务人员在完成一个新品开发的流程的时候,需要在多个业务系统之间切换.然 ...
前端做后台管理系统有前途吗_关于后台管理系统前端项目的思考
开发后台管理系统是大部分前端开发人员接触过的项目,如何更好的进行项目的搭建.组件的开发.数据结构的设计等等,这些都是需要考虑的问题.以下是我结合一些项目的经历和其他大佬的项目代码与技术分享,做出了对于 ...
vue工程加入Java代码_vue 前端项目创建
一.创建项目将vue-admin-template-master 模板放入创建的 VS code 的工作空间.重命名为自己的项目. 模块获取方法:关注"Java程序员进阶",回复 ...
前端学习（1849）vue之电商管理系统电商系统前端项目初始化
谷粒学苑-项目搭建、讲师前后端、课程分类前后端、OSS、EasyExcel
谷粒学苑 url: jdbc:mysql://localhost:3306/guli?useUnicode=true&useSSL=false&characterEncoding=UT ...
在线考试系统（二）前端项目搭建
在线考试系统前端项目搭建安装nodejs和cnpm 查看node和cnpm版本安装vue-cli 或者升级vue-cli版本创建vue项目测试项目是否启动成功 Npm和cnpm和yarn区别 ...
使用Dockerfile+nginx配置前端项目
使用Dockerfile+nginx配置前端项目创建文件: ├── default.conf ├── Dockerfile ├── html │ ├── index2.html │ └── inde ...
谷粒学苑项目后台管理系统
项目分为三篇: 谷粒学苑项目前置知识谷粒学苑项目前台界面谷粒学苑后台管理系统额外增加的功能: 后台课程小节的删改操作
java之学习记录 5 - 1 - 模拟拉勾项目介绍与后台系统搭建
项目架构(此文章只供个人学习的记录) 1 项目介绍拉勾教育后台管理系统,是提供给拉勾教育的相关业务人员使用的一个后台管理系统, 业务人员可以在这个后台管理系统中,对课程信息.讲师信息. 学员信息等数 ...

谷粒学苑 —— 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、方案二：使用网关

谷粒学苑 —— 3、后台系统前端项目创建相关推荐

最新文章

热门文章