springmvc+vue+vux整合要點

文章目錄


轉載請註明鏈接

#1. springmvc:
springmvc框架搭建此處不再贅述。
以下幾點注意:
1.json方式與前端傳遞對象參數:

/**
	 * @ResponseBody用以將map以json形式返回
	 * @RequestBody用以以json形式傳入member對象
	 * @param httpSession
	 * @return
	 * @throws IOException
	 */	
	@ResponseBody
	@RequestMapping(method = RequestMethod.POST, value = "/deleteMember", produces = { "application/json;charset=UTF-8" })
	public  Map<String, Object> deleteMemberProcess(HttpServletRequest request, HttpServletResponse response, @RequestBody Member member) throws IOException {
		memberService.deleteMember(member);
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("status", 0);
		return map;
	}

在vue中的調用:

  this.$http.post(this.GLOBAL.site+"/admin/deleteAppoint",item).then(function (res) {
          console.log("deleteAppoint status:" + res.body.status)
          if (res.body.status == 0) {
            this.getPublishedAppoints()
          }
        })

整個map以json格式放入res.body中,map中status變量爲res.body.status。
2.定時器任務:
有個需求需要在每天的23點以前執行一些刪除任務,這需要用到springmvc的定時器,具體配置如下:

@Scheduled(cron = "0 0 23 * * ?") // 每天23點執行刪除任務
    public void taskCycle() {
    	//刪除任務代碼
    }

在spring-mvc.xml中,配置task。
具體可以參照:
https://www.cnblogs.com/liaojie970/p/5913272.html
3.靜態資源配置:
具體參見以下兩篇文章:
https://www.cnblogs.com/dflmg/p/6393416.html
https://blog.csdn.net/codejas/article/details/80055608
spring-mvc.xml中的配置如下

 <mvc:default-servlet-handler/> 
    <!--這裏是對靜態資源的映射-->
    <mvc:resources mapping="/js/**" location="/static/js/" />
    <mvc:resources mapping="/css/**" location="/static/css/" />

vue執行npm run build後會在project目錄下生成dist文件,裏面有:
static文件夾:包括css、js、img
index.html
將static文件夾及index.html複製進eclipse的src->main->webapp目錄下即可。該目錄還有一個WEB-INF,裏面配置了web.xml
這樣靜態資源與xml中配置的 location="/static/js/“及location=”/static/css/"對應起來了。當然mvc:resources的配置是多餘的。
4.JuitTest:
@Test及函數名前綴test都要加上

@Test
	public void testRegisterMember() {
	}

如果想在maven build時跳過test,runAs->maven build…中配置Goals:
clean install -DskipTests
5.數據庫路徑編碼:
具體配置如下:

<property name="jdbcUrl">
			<value>jdbc:mysql://localhost:3306/schooldb?useUnicode=true&amp;characterEncoding=UTF-8&amp;useSSL=false</value>
</property>

6.數據自動創建:
在雲服務器上你可能不想寫sql語句創建數據庫,可以利用Hibernate根據實體類自動創建:

  <property name="hibernateProperties">
            <props>
                <prop key="hibernate.hbm2ddl.auto">update</prop> <!--hibernate根據實體自動生成數據庫表-->
                <prop key="hibernate.dialect">org.hibernate.dialect.MySQL5Dialect</prop><!--指定數據庫方言-->
                <prop key="hibernate.show_sql">true</prop>
                <prop key="hibernate.format_sql">true</prop><!-- 在控制檯顯示執行的數據哭操作語句(格式)-->
            </props>
        </property>

現將update中update改爲create上傳至雲服務器,start tomcat服務器,然後改回update,再上傳運行,數據庫就建好了,當然create database schooldb必須手動先執行下,否則數據庫連接不上。
7.聯合主鍵:
預約Id與手機號聯合主鍵,同時該類要實現implements Serializable。

	/**
     * 預約Id
     */
    @Id
    @Column(name = "APPOINT_ID")
    private String appointID;

    /**
     * 會員手機號
     */
    @Id
    @Column(name = "MOBILE")
    private String mobile;

另外需要重寫hashCode及equals,這個shift+alt+s自動生成就好了:

@Override
	public int hashCode() {
		final int prime = 31;
		int result = 1;
		result = prime * result + ((appointID == null) ? 0 : appointID.hashCode());
		result = prime * result + ((mobile == null) ? 0 : mobile.hashCode());
		return result;
	}

	@Override
	public boolean equals(Object obj) {
		if (this == obj)
			return true;
		if (obj == null)
			return false;
		if (getClass() != obj.getClass())
			return false;
		MemberAppoint other = (MemberAppoint) obj;
		if (appointID == null) {
			if (other.appointID != null)
				return false;
		} else if (!appointID.equals(other.appointID))
			return false;
		if (mobile == null) {
			if (other.mobile != null)
				return false;
		} else if (!mobile.equals(other.mobile))
			return false;
		return true;
	}

其他方案見:https://www.cnblogs.com/lcngu/p/5854864.html
8.跨域配置:
對跨域的一個詳細解釋如下:
https://segmentfault.com/a/1190000012469713
因爲涉及到同機搭建tomcat與node.js,用於vue測試,所以要配置跨域。

#2. Vue部分:
待續

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章