Vue 的开发需要的 node 环境,其实上在开发的过程中会遇到一些你想不到的问题,比如 npm工具的版本和 node 环境不匹配(你把其他项目导入到自己的环境)
vue-element-admin(是一个官方提供的现成的项目) 是一个后台前端解决方案,它基于 vue 和 element-ui 实现。它使用了最新的前端技术栈,内置了 i18n 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。
vue-element-admin 定位是后台集成方案,不太适合当基础模板来进行二次开发,因为本项目集成了很多你可能用不到的功能,会造成不少的代码冗余。
官方还提供了一套基础模板 vue-admin-template ,我们基于它进行二次开发,想要什么功能或者组件就去
vue-element-admin 那里复制过来。
下载并安装 Git ,傻瓜式安装即。下载地址 https://git-scm.com/download
(也可以通过直接解压 vue-element-admin项目压缩包,然后进行二次开发)
克隆 vue-element-admin 项目与安装依赖
git clone https://github.com/PanJiaChen/vue-element-admin.git
git clone https://gitee.com/panjiachen/vue-element-admin.git
解决下载满的问题: 这里设置下载源地址
npm config set registry https://registry.npm.taobao.org
依赖下载慢解决办法:npm install --registry=https://registry.npm.taobao.org
本地开发启动项目: npm run dev
克隆下载完成之后,我们CD 进行项目根目录,然后启动项目 **npm run dev**
启动完成后会自动打开浏览器访问 http://localhost:9527,你看到如下页面就代表成功了。
我们把 vue-element-admin 当做后台集成方案,然后在 vue-admin-template 的基础上进行二次开发,想要什么功能或者组件就去 vue-element-admin 那里复制过来,所以我们在克隆vue-admin-template 到本。
(也可以通过直接解压 vue-element-admin项目压缩包,然后进行二次开发)
克隆 vue-admin-template 项目与安装依赖
git clone https://github.com/PanJiaChen/vue-admin-template.git
git clone https://gitee.com/panjiachen/vue-admin-template.git
浏览器访问 http://localhost:952
本项目已经生成了一个完整的开发框架,提供了涵盖中后台开发的各类功能和坑位,下面是整个项目的目录结构。
在原有的项目的基础上我们要对项目做一些基本的调整 ,比如修改 logo 之类的操作等。
重命名项目名字,需要搭配package.json 文件中去修改。
如果项目中有 package-lock.json 文件则和上面的修改方式一样。
vue 的脚手架使用的 EelementUI 组件是英文版本,所以很多提示都是英文的。
修改element-ui 为中文后的展示效果:
ESLint 是一个用来按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格,也保证了代码的可读性。
如果不想使用则可以修改 vue.config.js 文件,如下:
在src / sttings.js 中修改页面的 title、固定头部、显示logo
vue项目也有自己的端口号,修改方式是 需要在 vue.config.js文件中修改。
找到 src / layout / index.vue 文件 和 src / layout /components /Sidebar /Logo.vue 文件进行修改。
这里 我们自己先选定好需要替换的logo图片,保存到 src /assets —— 公用的静态资源 文件中,后续直接引用即可。
修改后效果展示:
面包屑就是指的组件在导航页面前显示的小图标,我们可以通过修改路由的配置文件中进行修改配置 src / router /index.js 文件中,找到对应组件的配置信息模快即可进行修改。
这里的icon 图标选择,也可以通过 element-ui 官方组件中的图标去选择一个,进行替换即可。
替换后的效果图:
Vue-admin-element 的登陆是非常复杂的,所以暂时你只需要知道登陆的流程就行,不用去追究每一行代码。
通过下面几个文件的分析观察,整理Vue-admin-element 二次开发模板的登录流程。
store —— 全局状态管理 vuex 数据存储中心(数据包括了 data 和函数),里面的数据可以项目的所有组件共享。
main.js —— 入口文件 加载组件、初始化vue实例等。 main.js 文件中导入了 store 模快。
views —— 所有的自定义组件
第一步:观察在 src / views / login / index.vue 自定义组件下的login文件夹中的 index.vue 自定义组件中的核心代码。
第二步找到 store / modules / user.js 的核心代码。该user.js 文件中定义了两种类型的方法,分别是定义在 mutations{} 中定义的方法和 actions{} 中定义的方法。
其中 mutations 中定义了 四个方法分别是 RESET_STATE、SET_TOKEN、SET_NAME、SET_AVATAR。
在 actions 中定义的方法有 login、getInfo、logout、resetToken
注:store 是数据的仓库中心,里面定义的两类方法,一类定义在 actions 中(这里的方法通过$store.dispatch(‘user/login’,参数) 的方式出发),一类定义在 mutations 中(这里的方法通过 commit(‘SET_TOKEN’, data.token) 方式进行触发)。
在src/store/modules /user.js 文件中也引入了 src/utils/auth.js 文件中的三个方法。
import { getToken, setToken, removeToken } from '@/utils/auth'
这里来观察一下 该文件下的这几个方法,都是对token的操作方法。
import Cookies from 'js-cookie'
//这里存储到浏览器 和 在浏览器中取token的key都是一样的
const TokenKey = 'vue_admin_template_token'
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {//user.js中的登录方法中存储token到浏览器时调用的方法
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
在src/store/modules /user.js 文件中也引入了 src/api/user.js 文件 中的 login、getInfo、loginOut 三个方法。
在上面的 user.js 文件中引入了 我们的该文件,来进行axios 异步请求的发送,下面来看一下我们 request.js 文件中的详细内容。
通过上面几个文件的分析,可以大致的看出来整个登录过程中,所涉及的相关文件内容。
这里需要注意,我们的请求路径、请求接口参数命名必须都要与前端相对于
package cn.example.springbootproject.tempTestVue;
import org.springframework.web.bind.annotation.*;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* @Description: 测试Vue登录实现的控制层
* @ClassName: VueLoginController
*/
@RestController
@CrossOrigin
@RequestMapping("vue-admin-template/user")
public class VueLoginController {
/**
* 这里就不在调用Service层代码去数据库中查询,这里简单的写死数据进行调用测试
* */
@PostMapping("login")
public Object login(@RequestBody Map<String,Object> data){
System.out.println("访问login");
System.out.println("username = " + data.get("username"));
System.out.println("password = " + data.get("password"));
String userId = "2013";
if (userId==null) {
return "fail";
}
HashMap<String, String> map = new HashMap<>();
map.put("token",userId);
return map;
}
@GetMapping("info")
public Object getInfo(@RequestParam String token){
System.out.println("访问info token="+token);
HashMap<Object, Object> map = new HashMap<>();
map.put("username","张三");
map.put("password","123456");
map.put("name","二狗子");
map.put("id","2013");
map.put("phone","133144");
map.put("avatar","xxxxx头像!");
map.put("address","地址位置");
return map;
}
@GetMapping("list")
public Object userList(){
System.out.println("访问list");
HashMap<String, Object> map = new HashMap<>();
List<Map> list = new ArrayList<>();
for (int i=0;i<5;i++){
Map aclUser = new HashMap<>();
aclUser.put("userName","张三-"+i);
aclUser.put("password","123456");
aclUser.put("nickName","二狗子-"+i);
aclUser.put("gmtCreate","");
aclUser.put("gmtModified","");
list.add(aclUser);
}
map.put("items",list);
return map;
}
@PostMapping("/logout")
public Object loginout(){
System.out.println("退出登录!!!");
return null;
}
}
// create an axios instance
const service = axios.create({
//指定了我们要访问的后端的路径(比如说 htppt://localhost:8080
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
在该配置项中的 VUE_APP_BASE_API 指定了我们的访问路径,该数据是通过配置文件中获取 .env.production(生成环境) 或者是 **.env.development(开发环境) ** ,具体根据那个文件中获取的,的根据自己项目的实际部署环境来确定。
同时 我们将下方的 response interceptor(响应拦截器)部分的内容全部注释掉,暂时不使用到响应拦截器相关的操作。注释时,不要注释多了,末尾的 export default service 是需要保留的。
# just a flag
ENV = 'development'
# base api
# VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'http://localhost:8888'
这里的路径根据自己后端路径进行调整更改。
**注:**需要主页我们的请求参数一定要与后端接收参数对应,以及前端接收参数,一点要与响应参数响应参数相匹配,下面两个文件中就需要与后端相应参数对应。
调整好后端代码之后,第一次登录可以观察到如下结果:
可以观察到前端保存了我们的token信息:
在浏览器端存在token信息的时候,我们重写访问登录页面首页时,前端会直接通过获取到的token信息,进行调用后端的 getInfo() 方法来获取用户信息,从而跳过了登录操作。
当token不存在时(这里我们可以人为的删除存储在浏览器端的该token数据),在进行其他操作时,会跳转到登录界面,这里就相当于我们的用户登录过期了,就需要重新进行认证操作。
将打包好的jar文件上传到服务器中
注意这里,我用的是Linux环境,前提是我们的Linux环境已经安装了JDK1.8。
nohup java -jar vue-admin-0.0.1-SNAPSHOT.jar -&
或者
nohup java -jar 项目名称.jar --server.port=项目端口号 do_iptable.jar >/dev/null 2>&1&
firewall-cmd --add-port=项目端口号/tcp --permanent
firewall-cmd --reload
ps -ef|grep java --查看进程执行情况。
将前端vue项目打包上传
前端vue项目打包
npm run build:prod
打包过程可能会出现错误;Vue 报错error:0308010C:digital envelope routines::unsupported,可以在终端先执行: export NODE_OPTIONS=–openssl-legacy-provider 或者是在vue项目中的 package.json 配置相关信息:
打包成功之后,项目根目录中会增加一个 dist 文件夹。我们需要将该文件夹,上传到服务器中。
vue 项目—>npm run build:prod—>dist–>上传到 linux
这里需要自己提前先将 niginx 服务部署到我们的服务器中,这里就不单独讲解 nginx 服务的部署流程了。
配置nginx访问:
vim /user/local/nginx/comf/nginx.conf --修改Nginx的配置文件
添加下面配置,实现nginx访问项目。
#location / {
# root html;
# index index.html index.htm;
#}
location /{
root /usr/local/java/dist; #前端项目打包 dist文件保存地址
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
location /prod-api/{
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:8888/;
}
重新启动 nginx服务操作
访问项目