准備工作
當前項目運行的系統環境是MacOS,已經測試可以正常運行,並且之前開發的時候也在Windows上進行運行過,只要保證下面的環境安裝正確應該就可以正常運行。
環境准備
JDK環境
由於本項目是基於Java開發的,所以需要准備好JDK1.7及以上的環境,可以通過如下命令查看當前版本:
java -version
具體的環境安裝,請根據自己的當前操作系統的環境進行查找安裝。
參考的安裝方法:http://www.runoob.com/java/java-environment-setup.html
Maven環境
本項目是基於Maven3.5進行構建,所以,在開始導入項目之前請務必確保系統中安裝了Maven的環境,可以通過如下的命令查看當前Maven的版本信息:
mvn -v
如果沒有安裝好Maven的環境,請自行根據自己的操作系統查找詳細的安裝方法。
參考的安裝方法:http://wiki.jikexueyuan.com/project/maven/environment-setup.html
注意:Maven3.3及以上的版本要求JDK為1.7及以上的版本
Tomcat環境
本項目為Java開發的Web項目,是基於Tomcat應用服務器進行運行的,開發運行的Tomcat的版本為8.0,所以使用者自己在官網上根據自己的系統進行相關版本的下載, 參考地址如下:
https://tomcat.apache.org/download-80.cgi
將下載下來的壓縮包解壓后直接使用即可。
MySQL環境
本項目采用的數據庫為MySQL5.7,請使用者根據自己的操作系統在官網進行相關的數據庫版本的下載和安裝,參考的地址如下:
https://dev.mysql.com/downloads/mysql/
最好在安裝好MySQL的數據庫之后,安裝一個數據庫管理軟件的可視化界面,比如Navicat for MySQL,這樣操作起來比較方便,用戶根據需要執行搜索下載安裝。
開發工具
本項目在開發的時候采用的是IDEA集成開發環境,大家也可以在官網根據自己的操作系統環境進行下載安裝,參考地址如下:
https://www.jetbrains.com/idea/download/#section=mac
項目介紹
說明:接下來的介紹默認上面的環境和開發工具都已經安裝好了
項目導入
首先,將下載下來的項目的文件進行解壓縮,然后,將項目導入到IDEA中,在導入的過程中選擇Open -> 選中解壓后的文件夾,然后以Maven的項目進行導入進行了。
在剛開始導入的時候,如果本地的Maven倉庫中的包不夠,會花費一段時間進行相關依賴包的下載,可以在IDEA的右下角看到進度,等待相關的依賴都下載好了之后再進行其他的操作。
此時請注意,有可能本地安裝Maven的時候設置的遠程Maven鏡像倉庫是國外的,此時會導致依賴下載很慢,此時可以將Maven鏡像換成國內的,比如說淘寶的,以下是參考方法:
https://www.jianshu.com/p/4d5bb95b56c5
也可以自己進行搜索然后進行修改。
項目結構
一下是正常導入之后,可以看到的項目的整體的結構:
主要的層次如下:
- java //存放源碼
- controller //存放所有的前端控制器的代碼
- dao // 存放所有的 Mybatis的映射文件和相應的dao文件
- dto // 封裝了幾個簡單的包裝類
- entity // 所有的實體類信息
- service // 定義了所有的服務接口和相應的實現
- util // 系統中用到的一些工具類
- resources
- mysql // 里面存放了整個項目用到的數據庫已經相關的數據信息
- dp.properties // 數據庫相關的配置信息
- log4j.properties // 日志打印的配置文件
- mybatis-config.xml // Mybatis的配置文件
- webapp
- css // 存放了系統中用到的部分的css樣式和圖片
- goodsimage // 管理后台上傳的商品的圖片就存放在這兒
- images // 存放的是系統中前台用戶界面和后天管理界面用到的圖片信息
- js // 存放的是用到的所有的js信息。主要是第三方的js
- useravatars // 用戶中心界面中上傳的用戶的頭像
- WEB-INF
- views // 包括前后端所有的界面文件
- appilicationContext.xml // Spring 相關的配置文件
- springmvc-servlet.xm // Spring MVC相關的配置信息
- web.xml // 整個web項目運行的配置信息
項目運行
數據庫文件導入
1、根據上面介紹的每個文件夾下的文件的信息,找到在resources文件夾下面的mysql文件夾中的sql文件。
2、然后打開上面推薦安裝的Navicate for MySQL的客戶端,在客戶端中連接上系統中的mysql數據庫,注意,要先啟動mysql服務。
3、連接好了之后,請先建立一個名為xxshop的數據庫,采用utf-8的編碼,因為在上述的sql文件中沒有創建數據庫的sql語句。
4、在創建好的xxshop的數據庫中,右鍵,選擇導入sql文件,然后選擇上述位置的sql文件,然后進行導入。
5、導入完成之后,刷新一下當前的數據庫,然后就可以看到相應的數據表,點擊數據表,可以看到數據表中的數據文件信息。
6、上述步驟結束之后,就已經成功將數據庫文件導入到本地數據庫中了。接下來,來到IDEA中,找到db.properties文件,在該文件中將相應的username、password改為自己安裝MySQL的時候設置的連接的用戶名和密碼。如果,在安裝的時候沒有采用默認的3306端口,請將db.properties文件中的jdbcUrl屬性中的端口號3306改為安裝MySQL時設置的端口號。
到此,數據庫的導入工作完成。
啟動項目
1、首先,在IDEA中,右上角,添加tomcat服務器,注意,在添加tomcat服務器的時候會提示將當前項目的artifact添加進tomcat中。
2、在上述步驟完成之后,直接啟動tomcat即可開始運行項目了。如果之前的步驟都成功完成,此時就可以成功的啟動項目。
3、當Tomcat成功啟動之后,會默認打開瀏覽器:http://localhost:8080/ ,此時如果沒有直接顯示網站的首頁,則在鏈接后面加上 http://localhost:8080/XXShop 即可,此時就可以看到項目的信息了。
項目運行界面演示
可以使用的賬戶:
username : admin password : admin
username : business password : business
1、首頁信息
2、商品詳情
3、訂單詳情
4、用戶中心
5、后台管理首頁
實現思路
以實現用戶的登錄作為示例來講解實現的思路,其他的服務模塊類似。
數據庫的設計
通過分析系統中的用戶的相關的功能,得到用戶的屬性信息,比如:
具備登錄的操作,因此需要用戶名和密碼信息,一般情況下還需要一個id來作為主鍵。
具備角色的區分,因此每個用戶的信息都應該有一個字段用來標識角色信息(當然此處實現的角色比較簡單)。
在用戶登錄之后,具有用戶中心,來顯示用戶的基本信息,比如用戶的頭像、手機號、賬戶余額、郵箱、注冊時間等。
作為一個系統,可以在后台管理中對用戶進行刪除的操作,但是,又由於用戶信息的重要性,所以,實際上並不會在系統中真正進行物理刪除,因此,需要一個字段來表示用戶的狀態。
以上的分析,就得到了有關用戶表user的數據庫表的相關信息了。
實體類的編寫
在得到數據表的設計之后,后台就需要有一個相應的實體類來進行與數據庫交互時數據的接收,因此根據User表的設計,結合字段等信息,編寫User的實體類,並且在類中實現相應字段的getter和setter方法。
數據操作層Dao實現
在數據表和實體類設計完成之后,就開始根據業務邏輯設計相應的數據操作。
對於用戶的登錄操作而言,應該是根據用戶輸入的用戶名和密碼查找是否有相應的用戶,如果查找到了,就說明登錄信息是正確的,如果查找不到就說明登錄的信息是有誤的。
因此,在接口UserDao中,加入如下接口方法:
public interface UserDao {
/**
* 通過用戶名和密碼得到用戶
* @param name 用戶名
* @param password 密碼
* @return 返回用戶的實體類對象
*/
public User getUserByNameAndPwd(@Param("name") String name,
@Param("password") String password);
}
然后,根據上面的接口文件,編寫相應的兒映射文件UserMapper.xml,這個文件中就是對上面的Dao文件中定義的接口方法進行實現,直接是通過sql語句的方式實現的,如下所示:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC
"-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.huaxin.xxshop.dao.UserDao">
<resultMap type="User" id="UserResultMap">
<id property="id" column="id" />
<result property="name" column="name" />
<result property="password" column="password" />
<result property="phoneNum" column="phoneNum" />
<result property="money" column="money" />
<result property="avatar" column="avatar" />
<result property="regTime" column="regTime" />
<result property="role" column="role" />
<result property="status" column="status" />
<result property="email" column="email" />
</resultMap>
<select id="getUserByNameAndPwd" parameterType="String" resultType="User">
select * from
shop_user where name=#{name} and password=#{password}
</select>
</mapper>
這樣就是實現了根據用戶名和密碼查找用戶信息的dao操作了,然后就可以直接在Service中進行使用。
服務層Service的實現
該層一方面是給前端控制器提供相應的控制服務,另一方面就是注入數據訪問層的dao接口方法來實現數據庫的操作。
基於面向接口編程編程的思想,所以,先是在接口文件中定義操作的接口信息,然后在實現類中進行具體的實現。
以用戶的登錄操作為例:
首先,定義一個UserService的接口文件:
public interface UserService {
/**
* 用於進行用戶的登陸操作
* @param name 用戶的登錄名
* @param password 用戶密碼
* @return 登陸成功后返回用戶的實體類對象
*/
public User login(String name, String password);
}
這個接口定義了用戶登錄需要傳入的參數,返回的類型以及方法名,然后具體的實現類中再來實現方法體。
然后,定義一個UserServiceImpl類來實現上面的接口:
public class UserServiceImpl implements UserService {
@Autowired
private UserDao userDao = null;
@Override
public User login(String name, String password) {
return userDao.getUserByNameAndPwd(name, password);
}
}
以上就是實現一個服務的方式,之后的服務的實現就是在這個基礎上進行添加即可。
前端控制器Controller的實現
前端控制器主要就是接收來自前端的請求,然后將請求進行處理,此時就需要注入相應的服務來完成相關功能。
以UserAction為例,在進行用戶登錄的時候,接收到來自前端的login請求,然后進行如下的操作:
@Controller
@RequestMapping("/user")
public class UserAction {
@Autowired
private UserService userService = null;
/**
* 進行登陸操作 判斷當前的用戶名和密碼是否正確,如果驗證正確還需要將
* 用戶信息存放在session里面
* @return 返回對應result
*/
@RequestMapping(value = "/login", method= RequestMethod.POST)
public String login(String name, String password, HttpSession session,
HttpServletRequest request) {
User user = userService.findUser(name, password);
Visit visit = null;
if (user == null || user.getStatus() == 2) {
return "login";
} else {
user.setStatus(1);
userService.updateStatus(user.getId(), user.getStatus());
session.setAttribute("user", user);
user.setIp(getIpAddr(request));
userService.addLogin(user);
// 重定向到 index 資源
return "redirect:/index";
}
}
}
這就實現了,當前端界面像/user/login這個接口上發出POST的請求的時候,就會將請求傳到上面這個login方法進行處理,並根據處理之后的情況將結果返回給前端界面。
到此,后端的有關用戶登錄的實現流程基本就是這樣了,然后其他的功能按照類似的流程就行添加即可。
前端界面中進行登錄的實現
主要就是用表單進行實現的,在用戶點擊登錄按鈕之后,一方面驗證相關的信息的合法性,另一方面就將表單提交到相應的action接口上,如下所示:
<form action='./user/login' method="post">
<table width="515" class="form_table f_l">
<col width="120px" />
<col />
<tr>
<th>用戶名:</th>
<td><input class="gray" type="text" name="name" id="login_info" placeholder="請輸入用戶名" /><span id="namemsg"></span>
</td>
</tr>
<tr>
<th>密碼:</th>
<td><input class="gray" type="password" id="password" name="password" placeholder="請輸入密碼" /><span id="pwdmsg"></span>
</td>
</tr>
<tr>
<td></td>
<td><input class="submit_login" type="submit" value="登錄" />
</td>
</tr>
</table>
</form>
此時,在前端用戶點擊提交之后,就可以將請求觸發到后端的控制器了,然后調用相應的服務來完成功能。
更多內容可以了解關注:
CSDN博客:https://blog.csdn.net/hx0624_csdn
Github: https://github.com/StevenWash
個人博客:http://www.stevenwash.xin:8088/
基於Spring+Spring MVC+Mybatis的B2C購物網站
注:本文著作權歸作者,由demo大師代發,拒絕轉載,轉載需要作者授權