spring+vue环境搭建（一）

首先，梳理好目标：搭建一个web开发环境，前端涉及vue.js，webpack，element-ui，后端涉及gradle，springmvc，mysql，mybatis，spring-security，jetty

技术选型说明

（1）vue.js：javascript的mvvm模式开发语言，较angular.js更简单好用，较react更适用于小型应用
（2）webpack：javascript打包工具，将开发人员从html与js一对一引用的繁杂工作方式中解放出来，然后其webpack-dev-server对于开发工作也是极其友好
（3）element-ui：饿了吗的前端组件，较传统html组件更美观，更简单易用
（4）gradle：构建部署工具，较ant，maven更简单易用
（5）springmvc：java服务器框架，易于快速搭建一个服务器
（6）mysql：关系数据库，免费并且小巧
（7）mybatis：易用的持久化框架，较hibernate孰优孰劣看个人习惯
（8）spring-security：安全访问框架，包含登录，登出，登录状态记忆等功能
（9）jetty：web服务器，较tomcat更简单易用

开发环境说明

mac，intellij idea 2017.1.5，gradle 3.5

步骤说明

第一步：搭建gradle+springmvc项目，并用jetty运行
第二步：引入mysql，mybatis
第三步：引入vue.js+webpack+element-ui
第四步：前后端联调
第五步：引入spring-security
扩展：
    第六步：部署项目到阿里云服务器
    第七步：制作为git项目

OK，我们开始

第一步

通过IDE向导，搭建好gradle项目

搭建结果如下

然后，为了引入springmvc，我们需要几个步骤：

修改build.gradle，引入spring需要的包

修改文件目录结构，加入web.xml，spring-mvc.xml，及用于测试包含controller的java文件

web.xml内容

<web-app xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
         http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         version="3.0">
    <servlet>
        <servlet-name>springServletservlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet
        servlet-class>
        <init-param>
            <param-name>contextConfigLocationparam-name>
            <param-value>classpath:spring-mvc.xmlparam-value>
        init-param>
    servlet>

    <servlet-mapping>
        <servlet-name>springServletservlet-name>
        <url-pattern>/url-pattern>
    servlet-mapping>
web-app>

spring-mvc.xml内容

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">
    <context:component-scan base-package="com.demo.controller"/>
    <mvc:annotation-driven/>
beans>

controller我们就简单打印一个hello world

intellij idea特殊配置：将web.xml加入web应用配置

修改运行配置，启动jetty进行测试

jetty配置war包，exploded为调试模式

注意：选择update classes and resources，不然修改代码无法生效

运行调试：

OK，第一步完成

学习资料

https://cn.vuejs.org/v2/guide/#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88

https://doc.webpack-china.org/concepts/

http://element.eleme.io/1.4/#/zh-CN/component/input

https://gradle.org/guides/#getting-started

http://www.mybatis.org/spring/zh/index.html

https://docs.spring.io/spring-security/site/docs/current/guides/html5//