1. 程式人生 > >一步步搭建一個完整的web專案(一):基本框架的搭建

一步步搭建一個完整的web專案(一):基本框架的搭建

資料看的再多,不如自己手動操作一遍。

這裡我吧框架搭建的步驟羅列出來,只要跟著步驟走,就能實現一個web框架的搭建。

本篇的任務:基本框架的搭建,並實現註冊登入功能。

準備工作:

1、開發環境的準備

    詳細步驟不寫出來了,非常簡單,我把我的開發環境列出來。

    

2、jar包準備

    這裡我把spring的jar包全部匯入到專案中,因為我的另一個工程比較大,所以全部匯入了進去(也可以只匯入必須的jar包)。

    

搭建步驟:

    1、首先給大家看一下我的工程目錄。

    

    2、web.xml

    都有註釋,就不用細說了。

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd
" id="WebApp_ID" version="2.5"> <display-name>myweb</display-name> <!-- 載入Spring容器配置 --> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!-- 設定Spring容器載入所有的配置檔案的路徑 --> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext*.xml</param-value> </context-param> <!-- 配置SpringMVC核心控制器 --> <servlet> <servlet-name>springMVC</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!-- 配置初始配置化檔案,前面contextConfigLocation看情況二選一 --> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring-mvc.xml</param-value> </init-param> <!-- 啟動載入一次 --> <load-on-startup>1</load-on-startup> </servlet> <!--為DispatcherServlet建立對映 --> <servlet-mapping> <servlet-name>springMVC</servlet-name> <!-- 此處可以可以配置成*.do,對應struts的字尾習慣 --> <url-pattern>/</url-pattern> </servlet-mapping> <!-- 解決工程編碼過濾器 --> <filter> <filter-name>encodingFilter</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>encodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <welcome-file-list> <welcome-file>/pages/system/login/login.jsp</welcome-file> </welcome-file-list> </web-app>
    PS:這裡要提醒一下,檔案頭版本號那裡本來是3.0版本,但是tomcat7不支援,啟動會報錯,所以我給改成了2.5版本。

2、spring-mvc.xml

    spring相關的配置檔案

<?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:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xmlns:jdbc="http://www.springframework.org/schema.jdbc"
	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-4.0.xsd
	http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd">

	<!-- 註解掃描包 -->
	<context:component-scan base-package="com.leq" />

	<!-- 開啟註解 -->
	<mvc:annotation-driven />
	<!-- 註解的處理器介面卡 -->
	<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter"/>
	<!-- 註解的處理器對映器 -->
	<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping"/>
	<!--
		配置靜態資源,直接對映到對應的資料夾,不被DispatcherServlet處理
	-->
	<mvc:resources mapping="/img/**" location="/img/" />
	<mvc:resources mapping="/js/**" location="/js/" />
	<mvc:resources mapping="/css/**" location="/css/" />
	<mvc:resources mapping="/html/**" location="/html/" />
	<mvc:resources mapping="/pages/**" location="/pages/" />
	<mvc:resources mapping="/resource/**" location="/resource/" />

	<!-- 定義跳轉的檔案的前後綴 ,檢視模式配置-->
	<bean id="viewResolver"
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<!-- 這裡配的是接收後臺響應的jsp頁面地址,如果controller中返回的是【pages/system/login】,則返回到的頁面是【/pages/system/login.jsp】 -->
		<property name="prefix" value="/" />
		<property name="suffix" value=".jsp" />
	</bean>
	
	<!-- 配置自定義攔截器 -->
	<mvc:interceptors>
    	<mvc:interceptor>
    		<!-- 需要攔截的請求,這裡配的是所有請求都會攔截 -->
    		<mvc:mapping path="/**"/>
    		<!-- 不被攔截的請求 -->
    		<mvc:exclude-mapping path="/leq/**"/>
    		<mvc:exclude-mapping path="/pages/system/**"/>
    		<!-- 自定義攔截器類 -->
    		<bean class="com.leq.common.util.CommonInterceptor"></bean>
    	</mvc:interceptor>
    </mvc:interceptors>
</beans>

3、applicationContext.xml

<?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:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:jdbc="http://www.springframework.org/schema/jdbc"
	xmlns:jee="http://www.springframework.org/schema/jee" xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:tx="http://www.springframework.org/schema/tx"
	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
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd">
	
	<!-- 配置資料來源 -->
	<bean id="dataSource"
		class="org.springframework.jdbc.datasource.DriverManagerDataSource">
		<property name="driverClassName" value="oracle.jdbc.OracleDriver" />
		<property name="url" value="jdbc:oracle:thin:@127.0.0.1:1521:orcl" />
		<property name="username" value="first" />
		<property name="password" value="1111" />
	</bean>

	<!-- 2. mybatis的SqlSession的工廠: SqlSessionFactoryBean dataSource:引用資料來源 MyBatis定義資料來源,同意載入配置 -->
	<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="dataSource" ref="dataSource"></property>
		<property name="configLocation" value="classpath:mybatis-config.xml" />
	</bean>

	<!-- 配置mapper掃描器 -->
	<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
		<!-- 掃描包路徑,如果需要掃描多個包中間用半形逗號隔開 -->
		<property name="basePackage" value="com.leq.*.*.dao"></property>
		<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory" />
	</bean>

	<!-- 事務控制 對MyBatis操作資料庫 spring使用JDBC事務控制類 -->
	<bean id="transactionManager"
		class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
		<!-- 配置資料來源 -->
		<property name="dataSource" ref="dataSource" />
	</bean>

	<!-- 通知 -->
	<tx:advice id="txAdvice" transaction-manager="transactionManager">
		<tx:attributes>
			<!-- 傳播行為 -->
			<tx:method name="save*" propagation="REQUIRED" />
			<tx:method name="insert*" propagation="REQUIRED" />
			<tx:method name="update*" propagation="REQUIRED" />
			<tx:method name="delete*" propagation="REQUIRED" />
			<tx:method name="get*" propagation="SUPPORTS" read-only="true" />
			<tx:method name="select*" propagation="SUPPORTS" read-only="true" />
		</tx:attributes>
	</tx:advice>

	<!-- 配置aop -->
	<aop:config>
		<aop:advisor advice-ref="txAdvice"
			pointcut="execution(* com.leq.*.*.service.impl.*.*(..))" />
	</aop:config>
</beans>

PS:這裡說一下,其實applicationContext.xml和spring-mvc.xml這兩個配置檔案可以合併在一起。由於個人習慣,我將他們分開了。

4、mybatis-config.xml

    mybatis相關的配置檔案,主要載入mapper.xml檔案

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" 
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>

	<!-- 實體類,簡稱 -設定別名 -->
	<typeAliases>
		<typeAlias alias="userInfo" type="com.leq.system.login.bean.UserInfoBean" />
	</typeAliases>
	
	<!-- 實體介面對映資源 ,載入mapper.xml配置檔案-->
	<mappers>
		<mapper resource="com/leq/mapper/system/UserInfoMapper.xml" />
	</mappers>

</configuration>

5、log4j.properties

### set log levels ### 
log4j.rootLogger = DEBUG , Console , D
#Console控制檯相關
log4j.appender.Console=org.apache.log4j.ConsoleAppender
log4j.appender.Console.layout=org.apache.log4j.PatternLayout
log4j.appender.Console.layout.ConversionPattern=%d [%t] %-5p [%c] - %m%n
log4j.logger.org.apache=DEBUG
#sql相關
log4j.logger.java.sql.ResultSet=INFO
log4j.logger.java.sql.Connection=DEBUG
log4j.logger.java.sql.Statement=DEBUG
log4j.logger.java.sql.PreparedStatement=DEBUG
#log file日誌檔案相關
log4j.appender.D = org.apache.log4j.DailyRollingFileAppender 
log4j.appender.D.File = D:/logs/log.log 
log4j.appender.D.Append = true 
log4j.appender.D.Threshold = INFO
log4j.appender.D.layout = org.apache.log4j.PatternLayout 
log4j.appender.D.layout.ConversionPattern = %-d{yyyy-MM-dd HH:mm:ss} [ %t:%r ] - [ %p ] %m%n 

PS:細心的朋友可能會注意到,我的xml配置檔案裡面並沒有載入log4j.properties,為什麼還要寫?而且在專案啟動後,log4j.properties檔案確實被載入了且起作用了。我一開始也糾結,後來檢視原始碼的時候發現了這樣一段程式碼,於是便猜到了src目錄下會自動載入log4j.properties檔案。


6、UserInfoMapper.xml

這裡就是mybatis操作資料庫的部分了

<?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.leq.system.login.dao.UserInfoDao">
	<resultMap type="com.leq.system.login.bean.UserInfoBean" id="BaseResultType">
		<id column="LOGIN_ID" property="loginId" jdbcType="VARCHAR"/>
		<result column="USER_NAME" property="userName" jdbcType="VARCHAR"/>
		<result column="PASSWD" property="passwd" jdbcType="VARCHAR"/>
		<result column="MOBILE" property="mobile" jdbcType="VARCHAR"/>
		<result column="MAIL" property="mail" jdbcType="VARCHAR"/>
		<result column="CREATED_BY" property="createdBy" jdbcType="VARCHAR"/>
		<result column="CREATED_DATE" property="createdDate" jdbcType="TIMESTAMP"/>
		<result column="UPDATED_BY" property="updatedBy" jdbcType="VARCHAR"/>
		<result column="UPDATED_DATE" property="updatedDate" jdbcType="TIMESTAMP"/>
	</resultMap>
 <insert id="toRegister">
 INSERT INTO USER_INFO(
 	LOGIN_ID,
 	USER_NAME,
 	PASSWD,
 	MOBILE,
 	MAIL) 
   VALUES (
   	#{loginId,jdbcType=VARCHAR},
   	#{userName,jdbcType=VARCHAR},
   	#{passwd,jdbcType=VARCHAR},
   	#{mobile,jdbcType=VARCHAR},
   	#{mail,jdbcType=VARCHAR}
   )
 </insert>
 <select id="getUserPasswd" parameterType="java.lang.String" resultType="java.lang.String">
 	SELECT PASSWD FROM USER_INFO WHERE LOGIN_ID = #{loginId,jdbcType=VARCHAR}
 </select>
</mapper>

好了,配置檔案已經弄好了,剩下的就是jsp和java部分了。

因為jsp和java部分都很簡單,所以我就不把程式碼全部展示出來了。

login.jsp

就一個form表單


LoginController.java

package com.leq.system.login.controller;

import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

import com.leq.common.util.BaseController;
import com.leq.common.util.BaseResponse;
import com.leq.system.login.bean.UserInfoBean;
import com.leq.system.login.service.UserInfoService;

@Controller
@RequestMapping(value="/leq")
public class LoginController extends BaseController{
	@Autowired
	private UserInfoService userInfoService;
	
	@RequestMapping(value="/home",method=RequestMethod.POST)
	public ModelAndView toLogin(HttpServletRequest request,HttpServletResponse response){
		String loginId = (String)request.getParameter("loginId");
		String passwd = (String)request.getParameter("passwd");
		if(StringUtils.isEmpty(loginId) || StringUtils.isEmpty(passwd)){
			return new ModelAndView("pages/system/login/login",null);
		}
		String dbPasswd = userInfoService.getUserPasswd(loginId);
		Map<String,String> map = new HashMap<String,String>();
		if(dbPasswd == null || !dbPasswd.equals(passwd)){
			map.put("CODE", "999999");
			return new ModelAndView("pages/system/login/login",map);
		}
		request.getSession().setAttribute("user", loginId);
		
		return new ModelAndView("pages/common/menu",null);
	}
}

UserInfoServiceImpl.java

package com.leq.system.login.service.impl;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.leq.system.login.bean.UserInfoBean;
import com.leq.system.login.dao.UserInfoDao;
import com.leq.system.login.service.UserInfoService;

@Service
public class UserInfoServiceImpl implements UserInfoService{
	
	@Autowired
	private UserInfoDao userInfoDao;

	@Override
	public String getUserPasswd(String loginId) {
		return userInfoDao.getUserPasswd(loginId);
	}
	
}

UserInfoDao.java

package com.leq.system.login.dao;

import org.springframework.stereotype.Repository;

import com.leq.system.login.bean.UserInfoBean;

@Repository
public interface UserInfoDao {
	String getUserPasswd(String loginId);
}

好了,現在可以將專案新增到tomcat,然後啟動。


恭喜你,專案成功啟動!!!

雖然篇幅挺多,但是實際內容不多,小夥伴多看幾遍,就都能看懂了。

另外如果小夥伴疑惑,可以給我留言,我會努力幫忙解決,一起學習一起進步!!!

相關推薦

搭建eclipse+tomcat+maven+shiro+springmvc+jpa專案基本框架搭建

1、pom.xml配置 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://m

步步搭建一個完整web專案基本框架搭建

資料看的再多,不如自己手動操作一遍。這裡我吧框架搭建的步驟羅列出來,只要跟著步驟走,就能實現一個web框架的搭建。本篇的任務:基本框架的搭建,並實現註冊登入功能。準備工作:1、開發環境的準備    詳細步驟不寫出來了,非常簡單,我把我的開發環境列出來。    2、jar包準備

構建Fabric的web應用--搭建一個Fabric網路環境

想知道更多區塊鏈實戰技術,請百度【鏈客區塊鏈技術問答社群】進入 引言 a. 說明 我們不會在本教程中詳細解釋 Hyperledger Fabric 的工作原理。在學習本教程之前,您應該通過Hyperledger Fabric 官網 或其它渠道學習 Hyperledger Fabric 的

構建Maven專案完整過程--普通web專案Eclipse

進行以下步驟的前提是你已經安裝好本地maven庫和eclipse中的maven外掛了(有的eclipse中已經集成了maven外掛) 一、Maven專案的新建 1、滑鼠右鍵---->New----->Other... 2、直接點選下一步 3、選中 m

步步一起學DApp開發】web3.js 基本使用 | 連線geth | 建立web客戶端

概述 web3.js內部使用JSONRPC與geth通訊。它把所有JSON-RPC API當作JavaScript API,也就是說,它不僅支援所有與以太坊相關的API,還支援與Whisper和Swarm相關的API。 相關連結 web3.js託管地址

構建Fabric的web應用--搭建一個Fabric網路環境

想知道更多區塊鏈技術開發問題,請百度【鏈客區塊鏈技術問答社群】進入 配置docker-compose.yml檔案 在 fixtures 目錄下建立一個 docker-compose.yml 檔案並編輯 $ vim docker-compose.yml 將 network下的bas

使用gensim和sklearn搭建一個文字分類器流程概述

總的來講,一個完整的文字分類器主要由兩個階段,或者說兩個部分組成:一是將文字向量化,將一個字串轉化成向量形式;二是傳統的分類器,包括線性分類器,SVM, 神經網路分類器等等。 之前看的THUCTC的技術棧是使用 tf-idf 來進行文字向量化,使用卡方校驗(c

用wordpress 搭建一個好看的網站

   WordPress是一種使用PHP語言開發的部落格平臺,使用者可以在支援PHP和MySQL資料庫的伺服器上架設屬於自己的網站 。通過wordpress平臺,建立一個網站就像佈置自己的QQ空間一樣簡單。    小仙兒我根據寧皓網的教程,自己總結出了以下文章,希望與其他網

從零開始搭建一個簡易的伺服器

前言 其實大家大可不必被伺服器這三個字嚇到,一個入門級後端框架,所需的僅僅是HTTP相關的知識與應用這些知識的程式設計工具。據本人的經驗,絕大多數人擁有搭建後端所涉及到的基礎理論知識,但是缺乏能將之應用出去的工具,而本文即是交給讀者這樣一個工具,並能夠運用之來

基於SpringBoot開發完整專案準備工作

1.1 SpringBoot簡介① 為所有Spring 開發提供一個更快更廣泛的人門體驗。② 零配置。無冗餘程式碼生成和XML 強制配置,遵循“約定大於配置” 。③ 集成了大量常用的第三方庫的配置, Spring Boot 應用為這些第三方庫提供了幾乎可以零配置的開箱即用的能

如何基於Spring Boot搭建一個完整專案

前言 使用Spring Boot做後臺專案開發也快半年了,由於之前有過基於Spring開發的專案經驗,相比之下覺得Spring Boot就是天堂,開箱即用來形容是絕不為過的。在沒有接觸Spring Boot 之前,以為Spring Boot 是一個新的框架體系

基於SpringBoot開發完整專案準備工作

1.SpringBoot框架內容        想了一下,覺得在開發之前應該先大致瞭解一下springboot框架的概括,然後在後面的開發過程中再進一步加深理解,做到知其然知其所以然!Spring Boot 是基於Spring 框架技術來構建的,所以Spring Boot 又

基於create-react-app官方腳手架搭建dva模式的專案

思索良久,決定還是記錄下心得體會:一個基於create-react-app官方腳手架,搭建起來的dva開發模式的react專案。 當然現今的前端市場如此強大,你可以在網路上找到你想要的任何腳手架,並且很多可以開箱即用,不可否認它們很優秀,開發它們的人或團隊更值得我們豎起大拇

種大氣簡單的Web管理陳列版面設計

borde absolut setup hid color 正常的 for pre == 在頁面的設計中,多版面是一種常見的設計樣式。本文命名一種 這種樣式。能夠簡單描寫敘述為一行top,一列左文件夾,剩余的右下的空間為內容展示區。這種樣式,便於高速定位

linux部署java web 專案筆記

建立資料夾  # mkdir java //   建立資料夾java,mysql,tomcat 個人習慣 我喜歡分開資料夾安裝 # cd java //   開啟新建立的資料夾  JDK

一個 Yii + vue 專案6yii模型、多模組登陸

簡單講一下模型,之前介紹的AR類全稱是(ActiveRecord 在yii\db\ActiveRecord)用中文描述是活動記錄,是一種特殊的模型,模型呢,是 mvc 裡的 m,yii的模型(yii\base\Model)內建了一些常用的處理,像場景,驗證,載入資料,輸出處理。。。這裡就

一個 Yii + vue 專案5vue路由、yii驗證碼

有了一個簡單的驗證方法,於是需要寫一個前端頁面,首先在 vue src/ 建一個單頁面 login.vue <template> <div id="app"> <form> <div>

一個 Yii + vue 專案4AR類簡單操作

在 yii home/models/ 下建一個 User.php,內容如下: <?php namespace app\home\models; use yii\db\ActiveRecord; class User extends ActiveRecord { } 再在

一個 Yii + vue 專案3 解決跨域、資料庫配置

ok,有了基礎的環境,就可以寫功能了,首先要實現的功能就是 登陸驗證,這個時候我們還需要建一個數據庫,我在本地建了個數據庫,添加了一個簡單的表 user: user 表的 name 欄位是用來儲存使用者的名字的,而 username 和 password 則是對應的賬號密碼,考慮到

一個 Yii + vue 專案2

ok,寫前端程式碼,前端要用vue,同樣的自己搭建環境,我的目錄是這樣的: 貼一下我的 package.json { "name": "demo", "author": "[email protected]", "dependencies": {