springmvc + vue 简单系统搭建_springmvc项目增加vue

        <property name="driver" value="${jdbc.driver}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="root"/>
        <property name="password" value="123456"/>
    </dataSource>
</environment>

最重要的无非就是上面的这几个，配置好了就没什么了，到此为止mybatis就好了。


4.2、dispatcher-servlet.xml配置

<mvc:annotation-driven />

<context:component-scan base-package=“com”/>

mvc:interceptors
mvc:interceptor
<mvc:mapping path=“/**”/>

</mvc:interceptor>
</mvc:interceptors>

到此为止，dispatcher-servlet就这几点比较重要吧，其他的没什么了。拦截器看自己需要不需要，我的拦截器主要是用在了异步访问上，加了请求头，如下

public boolean preHandle(HttpServletRequest request, HttpServletResponse response,Object handler)throws Exception{
response.setHeader(“Access-Control-Allow-Origin”, “");
response.setHeader(“Access-Control-Allow-Methods”, "”);
response.setHeader(“Access-Control-Max-Age”, “3600”);
response.setHeader(“Access-Control-Allow-Headers”,“Origin, X-Requested-With, Content-Type, Accept”);
return true;
}

4.3、关键的就是web.xml了。话不多说上代码

Archetype Created Web Application

dispatcher org.springframework.web.servlet.DispatcherServlet 1 dispatcher / contextConfigLocation classpath:mybatis.xml org.springframework.web.context.ContextLoaderListener encodingFilter org.springframework.web.filter.CharacterEncodingFilter encoding UTF-8 forceEncoding true encodingFilter /*

每段代码加了注释，我就不啰嗦了。配置文件全部写好后，其他的就是自己发挥了。


一个登录controller的代码

@CrossOrigin(origins = “*”,maxAge = 3600)
@RequestMapping(value = “/login”,method = RequestMethod.POST)
public @ResponseBody UserOut login(@RequestParam(value = “name”,required = false) String name, @RequestParam(value = “password”,required = false) String password){
String msg = “”;
String pwd = password;

if(userService.login(name)!= null && pwd.equals(userService.login(name))){
    msg = "welcome" + name;
    userOut.setId("0");
}
if(userService.login(name)==null){
    msg = "user is not exist";
    userOut.setId("1");
}
if(userService.login(name) != null && !pwd.equals(userService.login(name))){
    msg = "password is wrong";
    userOut.setId("2");
}
userOut.setMsg(msg);
return userOut;

}

5、vue简介


 


5.1、vue中用了一个element，是第三方的UI，应该是饿了吗做的，挺不错的，大家可以试试，使用方法也很简单

安装
npm i element-ui -S
使用
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’

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’

Vue.use(ElementUI)
Vue.use(router)
Vue.config.productionTip = false,

/* eslint-disable no-new */
new Vue({
el: ‘#app’,
template: ‘’,
router,
components: { App }
})

第一张图片是官方安装element的教程


 


第二张图片是我自己的使用方式


5.2、路由的使用，vue所有皆为组件，在我看来组件就是对象的引申吧。说白了还是对象，没什么区别


不过vue使用起来比angular确实好点





# 最后

2020年在匆匆忙忙慌慌乱乱中就这么度过了，我们迎来了新一年，互联网的发展如此之快，技术日新月异，更新迭代成为了这个时代的代名词，坚持下来的技术体系会越来越健壮，JVM作为如今是跳槽大厂必备的技能，如果你还没掌握，更别提之后更新的新技术了。

![](https://img-blog.csdnimg.cn/img_convert/085b5abeb527a103ffe0c9c5c787059f.webp?x-oss-process=image/format,png)

**更多JVM面试整理：**

![](https://img-blog.csdnimg.cn/img_convert/755b7a95658bdfc1117070fba2afa9ce.webp?x-oss-process=image/format,png)

我们迎来了新一年，互联网的发展如此之快，技术日新月异，更新迭代成为了这个时代的代名词，坚持下来的技术体系会越来越健壮，JVM作为如今是跳槽大厂必备的技能，如果你还没掌握，更别提之后更新的新技术了。

[外链图片转存中...(img-NnuGe20c-1719721484970)]

**更多JVM面试整理：**

[外链图片转存中...(img-bqph1FWz-1719721484973)]