媒介

這一切都關於我們JAVA先生安排的一個商城體系大功課，因為年糕君主攻前端方面啦，所以在JAVA框架上相對是一個萌新，不過秉着先生說的學會一個框架只需半天的說法，末了也許一個星期的時刻，照樣因陋就簡達到了如許那樣的功用。
這个中出了許多BUG（而且做的進度曾讓我覺得很崩潰😭）~十分困難結課了，所以來好好總結一下。
【P.S】固然我這應當有一些不合理的設想和開闢要領（莊重）！願望列位看官能溫順一點，有毛病或更好看法迎接告訴我。

手藝和東西

前端相干：Vue.js、Vue-cli、webpack
後端相干：struts2.0、Spring 3.1、Hibernate 3、JUnit 4、MyEclipese
數據庫相干：MySQL 5.5

完成的需求

頁面需求：
頁面我是在網易雲商城的基礎上舉行了修正（因為我酷愛音樂呀），寫了一個首頁、商品細緻頁面、購物車頁、我的定單頁和登錄註冊頁。

功用需求：

• 登錄、註冊（推斷輸入正當）
• 首頁顯現、分類顯現、搜刮
• 購物車、定單顯現

前端相干

狀況1：運用Vue-cli搭建了多頁面的運用
我這個小項目雖然運用了Vue來做，然則照樣想做成多頁面的。因為我覺得這幾個頁面之間可復用的組件很少，從新空一個頁面出來寫也沒緊要。
因為也看過一些相似的文章來解說怎樣設置，所以這裏修正一下Vue-cli的設置就輕易殺青目標。不過也覺得到如許在每次啟動webpack舉行第一次打包的時刻會很慢。

狀況2：未運用vue-router舉行跳轉
由因而多頁面所以直接跳轉就能夠了，然則在某些頁面內能夠部份依據URL的轉變來轉變內容。這裏用了vue-router的道理來舉行檢測，依據URL的哈希轉變和監聽就能夠完成預期的主意（噗厥後回想起來用?來GET要領不也差不多啊…不過如許就會有顯著的頁面跳轉）。

window.location經常使用的屬性：

hash 從井號 (#) 最先的 URL（錨）

host 主機名和當前 URL 的端口號

hostname 當前URL的主機名

href 完全的URL

pathname 當前URL的途徑部份

port 當前URL的端口號

protocol 當前 URL 的協定

search 從問號 (?) 最先的 URL

狀況3：關於vuex的運用
由因而多頁面，所以vuex能夠說是沒啥作用QAQ，因為每一個頁面都是本身有一個根store，所以它們之間的數據變化是交互不了的，因而末了這個小項目沒有運用vuex。

狀況4：跨域的題目
雖然運用了axios，然則跨域的題目照樣會有的，而且背面發明很辣手的就是cookie都是不照顧的，小項目運用了背景舉行CORS設置來協助它跨域。

axios.defaults.withCredentials = true

狀況5：無關係的組件間通訊
在根部到場一個Vue實例，經由過程它來舉行一個事宜流傳的中轉，也就是所謂的EventBus，一樣的網上也有許多相似的文章。（不肯定是$root，也多是$root.$root，要見具體狀況而言）
詳解Vue 非父子組件通訊要領（非Vuex）

狀況6：localStorage
localStorage只能存字符串，所以要用JSON.parse和JSON.stringify舉行互相轉換然後操縱。

狀況7：Vue和style
這個我老是沒記清晰，直接嵌入綁定的時刻，有[...]，也有{...}。
數組的情勢

:class="[classA, classB]"
:class="['tip', usernameTip.length <= 0 ? 'hidden ': '']
:class="[classA, { classB: isB, classC: isC }]

對象的情勢

:class="{ 'class-a': isA, 'class-b': isB }

狀況8：給數組包含的對象的屬性賦值，Vue不會檢測到更新
運用在內部就是運用this.$set(數組成員[索引], '屬性名', 值)能夠完成。

狀況9：多個異步
也就是想發送多個異步要求，末了整合它們的效果。然則往往是直接實行背面的同步代碼了，所以會湧現襯着的時刻拿到的東西是空。因為時刻不夠，我用了之前的做法，就是遞歸挪用來處置懲罰。

狀況10：this的指向
在挪用別的組件后，在它的內部這個this極可能就會被修正了，這個時刻箭頭函數的優點就來了，不須要再定義一個暫時變量來存着vue的this。

狀況11：關於前端平安的明白
做的時刻，我就想着，對象數據之類的在掌握台都好像能夠很輕易的轉變，如許能夠繞過去發送要求。然則在之前也是如許的啊，所以說前端原本就是不平安的，所以在背景也肯定要做響應的處置懲罰步伐。而之所之前台也要做一些考證掌握，也一樣是能夠輕易正經常使用戶的體驗和運用，不必守候背景發還音訊的時刻如許。

狀況12：font-awesome的運用
打包出來的時刻，會顯現不了圖標，還要本身在頁面引入一個鏈接。

後端相干

下面以一個萌新的視角來論述關於SSH的各種：

• struts：它的action相稱因而servlet的作用，也就是我們接見背景設置的URL（默許是.action）都是它供應的。
• Spring：平常狀況下，我們都是挪用某個類的某個要領，如許總要建立一個對象來挪用，有了它去注入接口，就能夠直接挪用接口.要領來完成任務。
• Hibernate：簡化也更平安化了對數據庫的操縱。

組織

• mysho下放了Hibernate默許建立的類HibernateSessionFactory；
• mysho.action放了一切的Action類，包含UserAction、CartAction和ShowAction，它們會有一個service的成員來挪用對應的要領；
• mysho.service放的是service類，這裏直接挪用Dao類舉行響應的操縱。
• mysho.dao放的是一切和數據庫舉行操縱的Dao類；
• mysho.model放的是一切類原型，包含User、Item（商品）、Order（定單）和Type；
• mysho.utils是東西類，輔佐操縱。

框架的整合

發起運用IDE本身的設置~如許輕易一致換包啥的。假如湧現設置文件和框架jar包都沒啥毛病的狀況下照樣湧現了題目，而且怎樣百度都搜不到，請斟酌以下要領：

• 替換JDK的版本
• 替換某個框架的版本
• 假如不論怎樣改照樣湧現了一樣的毛病，請點擊Project -> clean，消滅緩存。假如沒用，就翻開Tomcat的文件夾看看內裡布置的內容修正了嗎，假如一向不改，就換一個workspace吧。

設置Hibernate

這裏我沒有用逆向工程，Spring的注入體式格局也是setter注入。
除了默許給設置的，還須要寫hbm.xml文件的映照：

<mapping resource="com/mysho/model/User.hbm.xml" />

假如在項目中運用了openSession，還須要設置：

<property name="hibernate.current_session_context_class">thread</property>

設置以UTF-8編碼舉行銜接，防備中文亂碼：

<property name="connection.characterEncoding">utf-8</property>

設置Spring

因為運用的是setter注入，所以在這裏必須要寫清晰一切要注入的數據的內容。比方：

<bean id="sessionFactory"
    class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">
    <property name="configLocation" value="classpath:hibernate.cfg.xml">
    </property>
</bean>

<bean id="userDao" class="com.mysho.dao.UserDaoImp">
    <property name="sessionFactory" ref="sessionFactory" />
</bean>

這裏設置了兩個bean，一個叫做sessionFactory，一個叫做userDao，userDao內里設置了一個sessionFactory的屬性，它指向(ref)id是sessionFactory的東西，所以如許運轉的時刻Spring就曉得應當注入什麼。

設置Struts

這裡有一個龐大的坑！而且之前百度了良久都沒有搜刮到準確的答案。
假如設置好項目，然則發明一切的接口成員都是null，那末請斟酌是否是這個題目:

<action name="showIndexItem" class="showAction" method="showIndexItem"/>

設置action的時刻，它所指向的class，請寫Spring中id對應的誰人action的class，不能寫成包.class，因為如許，Struts就不會經由Spring的注入，因為你更本沒把它們兩個聯繫起來。
別的另有設置編碼：

<constant name="struts.i18n.encoding" value="utf8" /> 

設置web.xml

<!-- ***Spring 容器初始化*** -->
<context-param>        
    <param-name>contextConfigLocation</param-name>        
    <param-value>classpath:applicationContext.xml</param-value>
</context-param>

<listener>
    <listener-class>
        org.springframework.web.context.ContextLoaderListener
    </listener-class>
</listener>

<listener>
    <listener-class>
        org.springframework.web.util.IntrospectorCleanupListener
    </listener-class>
</listener>

<!-- 設置編碼 -->
  <filter>
<filter-name>characterEncodingFilter</filter-name>  
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>  
    <init-param>  
        <param-name>encoding</param-name>  
        <param-value>utf-8</param-value>  
    </init-param>  
    <init-param>  
        <param-name>forceEncoding</param-name>  
        <param-value>true</param-value>  
    </init-param>  
</filter>  
 <filter-mapping>  
    <filter-name>characterEncodingFilter</filter-name>  
    <url-pattern>/*</url-pattern>  
</filter-mapping>  

 <!-- ******Struts2中心過濾器*****  -->
<filter>
    <filter-name>struts2</filter-name>
    <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
</filter>

<filter-mapping>
    <filter-name>struts2</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>  

注重啦，這裏的org.apache.struts2.dispatcher.FilterDispatcher是因為我的strut是2.0版本的，版本很低，高版本的寫法不是如許的。

其他

狀況1：設置跨域

response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Origin", 你的URL);
response.setHeader("Access-Control-Allow-Methods", 你的要領);

這裏假如Access-Control-Allow-Credentials為true的話，Access-Control-Allow-Origin不允許設置為*，必需準確填一個地點。

狀況2：以JSON情勢返回

response.setHeader("Content-Type", "application/json");

因為運用了前後端星散，所以必定要返回JSON了~如許雖然struts有一個JSON插件包，然則因為我的版本一向匹配不上，我就找到了一種最原始的要領來完成，然則實際上並不發起如許做。另一方面action舉行設置：

<package name="default" namespace="/" extends="struts-default">
    <action name="checkname" class="userAction" method="checkUsername"/>
</package>

向checkname.action發送要求即可，雖然掌握台會湧現一個正告說未設置勝利/失利的跳轉頁面，然則實際上不影響運用。

狀況3：報錯難以消除題目泉源
那末請運用JUnit來編寫測試用例吧！
這個要領真的超等好使，不過在測試Spring的時刻，須要手動從設置文件中去提掏出容器來,或許運用注入的體式格局來完成提取容器，百度都有許多文章。

狀況4：關於setter注入
每一個要被注入的接口成員須要有對應的setter要領，別的地點的類也須要一個沒有參數的組織函數。

狀況5：關於hql語句
注重:=這個標記，它的前後不要留空格：

from com.mysho.model.User user where user.username=:usernam

設置最先尋覓的位置，以及獵取的條數:

query.setFirstResult(start);
query.setMaxResults(size);

假如未求運用事件，掌握台報錯，改成事件的情勢就好了：

Session s = sessionFactory.getCurrentSession();
Transaction  transaction = s.beginTransaction();
...
transaction.commit();

狀況6：session獵取不一致
就是在這裏設置了session的值，但在另一個處所卻拿到的是空，
這個時刻就要斟酌應當是因為它們基礎就不在一個容器內，
因為發送要求的時刻必須要帶上響應的cookie才辨認~
但也有方法讓一切容器同享數據，運用：

ServletActionContext.getServletContext().getAttribute(...)
ServletActionContext.getServletContext().setAttribute(..., ...)

狀況7：JSON轉換的題目
JSONArray.fromObject(…)：把一個list轉換為JSON。
JSONObject.fromObject(…)：把一個Object轉換為JSON。
別的對象中存在Date範例的JSON會報非常，須要別的做更多特別處置懲罰才行，而且運用java.sql.Date和java.util.Date來操縱的話又會有差別效果。