idea从搭建完整的vue+element项目到打包到springboot

一。搭建vue项目

1。打开idea,新建项目
Create New Project > Static Web>填写project name和选择保存的工作空间>Finish

2。可以先安装淘宝镜像,下载比较快点,可以打开Terminal,输入命令:(不想要的话可以跳过这一步)

 

npm i -g cnpm --registry=https://registry.npm.taobao.org

 

3。先退出到顶层文件夹(E:\companyProdect>),再安装脚手架(如果不退出的上一层也行,下面初始化配置?Project name时直接回车,不然导入element时可能会有问题,我这边是先退到顶层),命令如下:

先输入:cd ..

再输入:npm i -g vue-cli

 

4。脚手架安装完成后,初始化包结构,命令如下:

vue init webpack vue-demo(vue-demo为自己的项目名)

之后会进行初始化配置,

?Project name ---- 项目名称(比如我的是vue-demo),init命令时也填了个project-name,如果无需更改,直接回车即可;

?Project description ---- 项目描述,按需填写。无需填写可以直接回车;

?Author ---- 作者

?Vue build ---- 构建模式,一般默认第一个;

?Install vue-router? ---- 是否安装vue-router。选Y。后边构建项目会用到。

?Use ESLint to lint yout code? ---- 格式校验,按需;

?Set up unit tests ---- 测试相关,按需;

?Setup e2e tests with Nightwatch? ---- 测试相关,按需;

?Should we run ‘npm install’ for you after the project has been created? ---- 按需,这里我选Yes, use NPM。如果选No,后续自己在目标目录下执行npm install即可。

 

5。出现如下就说明安装成功了,在浏览器输入相关地址就行

  

此处参考链接:https://www.jianshu.com/p/9c1d4f8ed068

 

二。导入element

1。输入命令:

npm i element-ui -S

2。修改main.js,添加如下代码

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)


以上是简单的vue项目,完整的如下。先看下本项目主要用到的:

三。导入axios

1。导入依赖

npm install axios --save

 

2。封装axios

2.1。在utils文件夹里新建一个globalData.js,存储基本请求路径

const globalData = {
baseUrl: 'http://localhost:8081'
}
export default globalData

2.2。在utils文件夹里新建一个request.js,封装请求.

import axios from 'axios'
import {Message} from 'element-ui'
import globalData from '@/utils/globalData'

const service = axios.create({
withCredentials: true, //允许跨域
timeout: 5000 //请求超时
})

//请求拦截
service.interceptors.request.use(
(confing) => {
confing.url = globalData.baseUrl + confing.url;
console.log("请求数据------------")
console.log(confing)
return confing
},
(error) => {
return Promise.reject(error)
}
)

//响应拦截
service.interceptors.response.use(
(response) => {
console.log("返回数据-----------")
console.log(response.data)
  //下面根据自己项目逻辑需求进行操作
const resData = response.data;
if (resData.code !== 'SUCCESS') {
if (resData.code === 'USER_NOT_LOGIN') {
Message({
message: resData.message || '未登录',
type: 'warning',
duration: 5 * 1000
})
window.location.href = ('/login')
}

Message({
message: resData.message || resData.msg || 'Error',
type: 'error',
duration: 5 * 1000
})

return Promise.reject(new Error(resData.message || 'Error'))
} else {
return resData;
}
},
(error) => {
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)

export default service

3。新建一个在src里api文件夹,然后在api文件夹里新建一个user.js

import service from '@/utils/request';

//登录
export function webLogin(resData) {
const formData = new FormData()
formData.append('account', resData.account)
formData.append('password', resData.password)
formData.append('verifyCode', resData.verifycode)
return service({
url: "/web/login/login.json",
method: "post",
data: formData
})
}

//登出
export function logout() {
return service({
url: "/web/login/logout.json",
method: "post"
})
}

//获取登录用户信息
export function userMes() {
return service({
url: "/web/user/get-user-info.json",
method: "get"
})
}

 

 4。页面调用后台接口

import {userMes} from "@/api/user"

userMes().then(res => {
  //逻辑操作
}).catch(e => {
})

axios中文文档:https://www.kancloud.cn/yunye/axios/234845/


四。使用store
1.在src里新建store文件夹,然后在store文件夹里新建一个modules文件夹专门放全局变量和新建一个index.js和新建getters.js进行配置

 2.先导入vuex

npm install vuex --save

3.导入js-cookie进行cookie操作

npm install js-cookie --save

4.在utils文件夹新建auth.js,封装cookie操作

import Cookie from 'js-cookie'

const TokenKey = 'vue_token'

export function getToken() {
return Cookie.get(TokenKey)
}

export function setToken(newToken) {
const token = Cookie.get('token');
return Cookie.set(TokenKey, token || newToken)
}

export function removeToken() {
return Cookie.remove(TokenKey)
}

3.在modules文件夹新建一个user.js

import {getToken, removeToken} from "@/utils/auth"
import {userMes, logout} from "@/api/user"
import {resetRouter} from "@/router"

const state = {

userInfoStore: {}
}

const mutations = {
USER_INFO_STORE: (state, userInfoStore) => {
state.userInfoStore = userInfoStore
}
}

const actions = {
userInfo: ({commit}, userInfoStore) => commit("USER_INFO_STORE", userInfoStore),
userMes({commit, state}) {

  //获取用户信息
return new Promise((resolve, reject) => {
userMes().then((res) => {
if (res.code === "SUCCESS") {
      //保存信息到全局变量,使用 this.$store.state.user.userInfoStore 获取

commit("USER_INFO_STORE", res.data)
resolve("200 OK")
} else {
reject("500 error")
}
}).catch(err => {
reject(err)
})
})
},
logout({commit, state}) {

  //注销登录
return new Promise((resolve, reject) => {
logout().then((res) => {
if (res.code === "SUCCESS") {
      //移除token

removeToken()
      //重置路由

resetRouter()
resolve("200 OK")
} else {
reject("500 error")
}
}).catch(err => {
reject(err)
})
})
}
}

export default {
namespaced: true,
state,
mutations,
actions

}

4。getting.js添加
const getters = {
userInfoStore: state => state.user.userInfoStore,
}
export default getters

5.在index.js添加并引用user.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'

Vue.use(Vuex)


const store = new Vuex.Store({
modules: {
//全局变量分组
  user

},
 getters
})

export default store

6.小结:
6.1 store主要有
state,mutations,actions,modules,getters
6.2 state相当于vue里data,存储数据
6.3 mutations主要修改state里的数据,属于同步,外部调用this.$store.commit("xxx"),官方不推荐直接在这里修改数据
6.4 actions与mutations功能差不多,属于异步,可在此commit调用mutations修改state里数据,外部调用:this.$store.dispatch("xxx")
6.5 modules为全局变量分组
6.6 getters相当于vue里computed计算属性,外部调用:this.$store.getters.xxx

store详解:https://baijiahao.baidu.com/s?id=1618794879569468435&wfr=spider&for=pc

 五。router

1。修改router里面的index.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import Login from '@/components/Login'
import Register from '@/components/Register'

Vue.use(Router)

export const constantRoutes = [
{
path: '/login',
name: 'login',
component: Login,
meta: {title: '登录'}
}, {
path: '/',
name: 'Index',
component: Index,
meta: {title: '首页'},
children: [{
path: 'mainCenter',

name: 'mainCenter',
component: () => import('@/components/Main'),
meta: {title: 'main'}
}]
}, {
path: '/register',
name: 'register',
component: Register,
meta: {title: '注册'}
}
]

const createRouter = () => new Router({
scrollBehavior: () => ({x: 0, y: 0}),
routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
const newRouter = createRouter();
router.matcher = newRouter.matcher
}

export default router

2。在src里创建permission.js进行路径拦截
import router from './router'
import {getToken} from '@/utils/auth'
import store from './store'
import NProgress from 'nprogress' //vue 进度条
import 'nprogress/nprogress.css'
import getPageTitle from "@/utils/get-title"

NProgress.configure({showSpinner: false})

//白名单
const whiteList = ['/login','/register']

router.beforeEach(async (to, from, next) => {
NProgress.start() //开始

//设置标题
document.title = getPageTitle(to.meta.title)

//获取token
const hasToken = getToken()

if (whiteList.find((item) => item === to.path)) {
next()
NProgress.done() //结束
} else {
if (hasToken) {
try {
     //获取登录用户信息
await store.dispatch("user/userMes")
next()
} catch (error) {
     //注销登录
await store.dispatch("user/logout")
next(`/login?redirect=${to.path}`)
}
NProgress.done()
} else {
//注意这里的符号是:` ,不然识别不了${}。并且这里'/login'必须再白名单里,不然出现死循环
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})

3。在utils里新建一个get-title.js进行网页标题操作
const title = "GGDong"

export default function getPageTitle(pageTitle) {
if (pageTitle) {
return `${pageTitle} - ${title}`
}
return `${title}`
}

4.小结:

1、全局守卫: router.beforeEach

2、全局解析守卫: router.beforeResolve

3、全局后置钩子: router.afterEach

4、路由独享的守卫: beforeEnter

5、组件内的守卫: beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave


router 官方文档:https://router.vuejs.org/

六。组件
1.父页面调用子组件
<myComponents></myComponents>
import myComponents from "../myComponents"

export default{
  components:{
    myComponents
  }
}

2.父页面传值到子组件
<myComponents :newData="newData"></myComponents>

export default{
  data(){
    newData:"这是父级页面数据"
  }
}
子组件获取值
export default{
  props:{
    newData:{type:String,default:""}
  }
}

3.父页面调用子组件方法
<myComponents ref="addGoods"></myComponents>
 methods:{
    init(){
      this.$ref.addGoods.子组件方法
    }
 }
4.子组件传值父页面
子组件:
this.$emit("getGoodsData",data);

父页面:
<myComponents @getGoodsData"getGoodsData"></myComponents>

methods:{
  getGoodsData(data){}
}

七。打包
1.如果springboot不分前后台代码的话就直接打包放到resources下的static(没有就创建)里面,

运行springboot项目后,输入 http://localhost:端口号/index.html#/ 就可以成功调用

 

 2.如果springboot分前后台的话就要修改下配置文件了,不然就会找不到静态资源

 

 2.1.修改config文件夹里的index.js

 

 2.2.如果element-ui的图片找不到的话,就修改build文件夹里的utils.js

 

 

3.运行springboot项目后,输入 http://localhost:端口号/static/web/index.html#/ 就可以访问

 

 

此处参考文档:

https://www.cnblogs.com/caideyipi/p/8187656.html

https://blog.csdn.net/xiaoHelloWord/article/details/96921209

 

GG-伏沙金
posted @ 2020-09-07 18:31  伏沙金  阅读(1688)  评论(0编辑  收藏  举报