面试相关：Springboot+Vue最基本的配置

1、pom.xm

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.ljq</groupId> <artifactId>bookshop</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>jar</packaging> <name>bookshop</name> <url>http://maven.apache.org</url> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.1.RELEASE</version> </parent> <properties> <java.version>1.8</java.version> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- 对jsp的支持 --> <dependency> <groupId>org.apache.tomcat.embed</groupId> <artifactId>tomcat-embed-jasper</artifactId> </dependency> <!-- 对servlet的支持 --> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> </dependency> <!-- 对jstl的支持 --> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> </dependency> <!-- 引入jpa的依赖 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <!-- 引入对druid的最新依赖 --> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.0.29</version> </dependency> <!-- 引入mysql的依赖 --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> <!-- fastjson的依赖 --> <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson --> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.58</version> </dependency> <!-- 增加mybatis支持 --> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>1.2.0</version> </dependency> <!-- 增加事务的支持 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-jdbc</artifactId> </dependency> <!-- 引入log4j2依赖 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-log4j2</artifactId> </dependency> <!-- commons-lang --> <dependency> <groupId>commons-lang</groupId> <artifactId>commons-lang</artifactId> <version>2.6</version> </dependency> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>3.8.1</version> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>

 

2、application.yml

server: port: 9009 spring: datasource: type: com.alibaba.druid.pool.DruidDataSource driver-class-name: com.mysql.jdbc.Driver url: jdbc:mysql://127.0.0.1:3306/wj?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8&useSSL=true username: root password: root123 mvc: static-path-pattern: /** resources: static-locations: classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/ ##filters:stat,wall,log4j mybatis: mapper-locations: classpath:/mappers/*.xml type-aliases-package: com.ljq.bookshop.pojo configuration: map-underscore-to-camel-case: true

3、application中的启动程序

package com.ljq.bookshop; import org.mybatis.spring.annotation.MapperScan; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.context.annotation.ComponentScan; /** * 启动程序 * */ @MapperScan(basePackages= {"com.ljq.bookshop.dao"}) @SpringBootApplication @ComponentScan(basePackages= {"com.ljq.bookshop"}) public class BookShopApplication{ public static void main( String[] args ){ SpringApplication.run(BookShopApplication.class, args); } }

4、vue中的main.js

import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import MavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' import store from './store' var axios = require('axios') axios.defaults.baseURL = 'http://172.16.122.199:9009/api' Vue.prototype.$axios = axios Vue.config.productionTip = false Vue.use(ElementUI) Vue.use(MavonEditor) router.beforeEach((to,from,next) => { if (to.meta.requireAuth) { if (store.state.user.username) { console.log(store.state.user.username) next() } else { next({ path: 'login', query: {redirect: to.fullPath} }) } } else { next() } }) /* eslint-disable no-new */ new Vue({ el: '#app', render: h => h(App), store, router, components: { App }, template: '<App/>' })

5、store里面的index.js

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { user: { username: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).username }, routes: [] }, mutations: { initMenu (state, menus) { state.routes = menus }, login (state, user) { state.user = user window.localStorage.setItem('user', JSON.stringify(user)) }, logout (state) { window.localStorage.removeItem('user') state.routes = [] } }, actions: { } })