目錄

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、后台系统前端项目创建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。