(前言:层次比较乱,日后抽空再整理)
目的
学习 Vue 与后端服务交互数据。先搭建一个后端服务,能用的、最简单的,首要目的是服务前端学习:接收前端 Vue 请求并返回预期数据。
选型
目前互联网公司后端服务很多是Java技术栈的,包括pua里在内很多很多公司都在用。Spring MVC,Spring Boot 之类。Spring Boot 可以看作 Spring MVC 的简化版,所以从 Spring MVC 下手。
至于 Python、Go,简单粗暴,腾讯和大小周条在用Go,其它公司相对较少。学好 Java 再上手 Python 很快,反之则。。。而且 Python 不适合大规模团队开发,动态一时爽,重构那啥。。。
新建 Maven 工程
把它转为 maven 工程:利用 maven 下载 Spring MVC 的依赖:
右键工程 - 点击 Add Framework Support - 选中 Maven - OK

pom.xml
文件,确保有 maven 依赖(如果没有可以手动添加):
1 2 3 4 5 6 7 8 9 10 11
| <properties> <spring.version>4.3.20.RELEASE</spring.version> </properties>
<dependencies> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${spring.version}</version> </dependency> </dependencies>
|
替换 maven 源:
maven 下载很慢,需要替换成国内的源,如果是公司内部使用,找同事要一份即可。这里是从网上找了个(其中私服已注释掉,仅使用阿里云源):
~/.m2/settings.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113
| <?xml version="1.0" encoding="UTF-8"?> <settings xmlns="http://maven.apache.org/SETTINGS/1.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd">
<localRepository>${user.home}/.m2/repository</localRepository> <pluginGroups/> <proxies/>
<mirrors> <mirror> <id>alimaven</id> <name>aliyun maven</name> <url>http://maven.aliyun.com/nexus/content/groups/public/</url> <mirrorOf>central</mirrorOf> </mirror> </mirrors>
<profiles> <profile> <id>jdk1.8</id> <activation> <activeByDefault>true</activeByDefault> <jdk>1.8</jdk> </activation> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target> <maven.compiler.compilerVersion>1.8</maven.compiler.compilerVersion> </properties> </profile>
<profile> <id>ali</id> <repositories> <repository> <id>alimaven</id> <name>aliyun maven</name> <url>http://maven.aliyun.com/nexus/content/groups/public/</url> <releases> <enabled>true</enabled> </releases> <snapshots> <enabled>true</enabled> </snapshots> </repository> </repositories> <pluginRepositories> <pluginRepository> <id>alimaven</id> <name>aliyun maven</name> <url>http://maven.aliyun.com/nexus/content/groups/public/</url> </pluginRepository> </pluginRepositories> </profile>
</profiles> <activeProfiles> <activeProfile>jdk1.8</activeProfile> <activeProfile>dev</activeProfile> <activeProfile>ali</activeProfile> </activeProfiles> </settings>
|
编写代码
右键没有 new package?

这样配置:

controller
1 2 3 4 5 6 7 8 9 10 11 12
| package com.tracenote.api.controller;
import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping;
@Controller public class HelloWorld { @RequestMapping("/hello") public String hello(){ return "helloworld"; } }
|
配置DispatcherServlet
找到WEB-INF/web.xml
,配置:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app> <display-name>Archetype Created Web Application</display-name> <servlet> <servlet-name>mvc-dispatcher</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>mvc-dispatcher</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> </web-app>
|
这里配置的 <servlet-name>mvc-dispatcher</servlet-name>
,指向了 WEB-INF/mvc-dispatcher-servlet.xml
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
<context:component-scan base-package="com.tracenote.api.controller"/> <mvc:annotation-driven/>
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/> <property name="prefix" value="/WEB-INF/pages/"/> <property name="suffix" value=".jsp"/> </bean> </beans>
|
编写 JSP
(其实我们需要的不是jsp,而是json格式的返回,这个后面再说,这里先看下 hello world 的效果)
WEB-INF/pages/helloworld.jsp
:
1 2 3 4 5 6 7 8 9 10
| <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Hello World</title> </head> <body> <h2>Hello World!</h2> <h2>Page returned from controller.</h2> </body> </html>
|
配置 Jetty Server
Tomcat 也可以,这里用的是 Jetty
在这里配置:

点左上角 + 号:

配置 Deployment:

Artifacts:

运行

(未完待续)