WEB應(yīng)用開發(fā)課程設(shè)計(jì)課程設(shè)計(jì)(論文)設(shè)計(jì)（論文）題目前后端分離的虛擬商城學(xué)院名稱專業(yè)名稱軟件工程學(xué)生姓名任課教師設(shè)計(jì)（論文）成績教務(wù)處制2021年7月4日

第一章項(xiàng)目概況和分工1.1項(xiàng)目名稱及立項(xiàng)原因項(xiàng)目名稱：前后端分離的虛擬商城立項(xiàng)原因：如今的游戲行業(yè)發(fā)展迅速，人們對于游戲中虛擬物品的交易的需求越來越大。但是，現(xiàn)在的情況是，各種各樣的虛擬物品交易網(wǎng)站魚龍混雜，而且商家的信譽(yù)度不高，賣家的權(quán)益很難得到保障，所以，我們想到自己來創(chuàng)建一個(gè)虛擬物品交易的網(wǎng)站。1.2項(xiàng)目框架SpringBoot與整合其他技術(shù)（Mybatis等），vue和layUI框架。1.3所用工具后端開發(fā)工具：IntelliJIDEA2020.1.3前端開發(fā)工具：VisualStudioCode數(shù)據(jù)庫版本：mysql5.0.8JKD版本：1.8協(xié)同開發(fā)工具：SVN1.4成員分工和比例：王斌:1.統(tǒng)一項(xiàng)目的協(xié)同開發(fā)環(huán)境2.支付功能的實(shí)現(xiàn)3.訂單頁，購物車頁的編寫鄧龍:數(shù)據(jù)庫的創(chuàng)建物品詳情頁，所有物品頁的編寫登錄注冊功能的實(shí)現(xiàn)張航:項(xiàng)目的創(chuàng)建以及基礎(chǔ)增刪改查功能的編寫主頁的編寫1.5各自工作內(nèi)容王斌：主要工作有統(tǒng)一項(xiàng)目的協(xié)同開發(fā)環(huán)境，比如maven版本，MySQL版本，以及前后端開發(fā)工具。有利用支付寶沙盒實(shí)現(xiàn)商城中的支付功能。還有商城中訂單頁和購物車頁面的編寫。鄧龍：主要負(fù)責(zé)數(shù)據(jù)庫設(shè)計(jì)，表的建立。利用PowerDesigner工具設(shè)計(jì)數(shù)據(jù)庫并生成.sql文件，然后利用datagrip工具連接數(shù)據(jù)庫，并生成各個(gè)表。還有登錄注冊功能的實(shí)現(xiàn)以及物品詳情頁和所有物品頁的編寫。張航：主要負(fù)責(zé)在idea中創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)，并且編寫所有類的基礎(chǔ)的增刪改查。還有前端index頁面的編寫。以及本次項(xiàng)目中所有素材的收集，數(shù)據(jù)庫中數(shù)據(jù)的編寫。

第二章組員王斌的項(xiàng)目開發(fā)工作任務(wù)一：統(tǒng)一項(xiàng)目的協(xié)同開發(fā)環(huán)境。后端開發(fā)工具：IntelliJIDEA2020.1.3前端開發(fā)工具：VisualStudioCode數(shù)據(jù)庫版本：mysql5.0.8JKD版本：1.8協(xié)同開發(fā)工具：SVN后端開發(fā)技術(shù)：SpringBoot與整合其他技術(shù)：創(chuàng)建maven工程，添加SpringBoot的起步依賴<parent>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-parent</artifactId>

<version>2.0.1.RELEASE</version>

</parent> 2.SpringBoot整合Mybatis（1）添加Mybatis的起步依賴 <!--mybatis起步依賴-->

<dependency>

<groupId>org.mybatis.spring.boot</groupId>

<artifactId>mybatis-spring-boot-starter</artifactId>

<version>1.1.1</version>

</dependency>（2）添加數(shù)據(jù)庫驅(qū)動(dòng)坐標(biāo)<dependency>

<groupId>mysql</groupId>

<artifactId>mysql-connector-java</artifactId>

<version>5.0.8</version>

</dependency>（3）添加數(shù)據(jù)庫連接信息在perties中添加數(shù)據(jù)量的連接信息#配置mysql

spring.datasource.url=jdbc:mysql://1:3306/shallow?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=UTC

spring.datasource.username=root

spring.datasource.password=root

spring.datasource.driverClassName=com.mysql.jdbc.Driver（4）創(chuàng)建數(shù)據(jù)庫與表 （5）創(chuàng)建實(shí)體BeanpublicclassUser{

intuser_id;//用戶id

intshoppingcar_id;//購物車id

Stringuser_name;//用戶名

Stringuser_account;//用戶賬號(hào)

Stringuser_password;//用戶密碼//此處省略getter和setter方法....} （6）編寫Mapper@Mapper

publicinterfaceUserDao{

/**

*查找所有User

*@returnList<User>

*/

List<User>findAllUser();…}@Mapper標(biāo)記該類是一個(gè)mybatis的mapper接口，可以被springboot自動(dòng)掃描到spring上下文中 （7）配置Mapper映射文件<!DOCTYPEmapper

PUBLIC"-////DTDMapper3.0//EN"

"/dtd/mybatis-3-mapper.dtd">

<mappernamespace="com.cdut.dao.UserDao">

<selectid="findAllUser"resultType="User">

select*fromUser

</select> （8）在perties中添加mybatis的信息 （9）編寫Controller （10）測試3.SpringBoot整合Junit 添加Junit的起步依賴 <dependency>

<groupId>junit</groupId>

<artifactId>junit</artifactId>

<scope>provided</scope>

</dependency>4.SpringBoot整合SpringDataJPA （1）添加SpringDataJPA的起步依賴<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-data-redis</artifactId>

</dependency> （2）添加數(shù)據(jù)庫驅(qū)動(dòng)依賴<dependency>

<groupId>mysql</groupId>

<artifactId>mysql-connector-java</artifactId>

<version>5.0.8</version>

</dependency> （3）在perties中配置數(shù)據(jù)庫和jpa的相關(guān)屬性#阿里云druid源

spring.datasource.type=com.alibaba.druid.pool.DruidDataSource

#初始化大小

spring.datasource.druid.initial-size=1

#最小容量

spring.datasource.druid.min-idle=1

#最大容量

spring.datasource.druid.max-active=20

spring.datasource.druid.test-on-borrow=true

spring.datasource.druid.stat-view-servlet.allow=true

#.mapper.orderdb=debug

#spring整合Mybatis

#pojo數(shù)據(jù)映射

mybatis.type-aliases-package=com.cdut.domain

#Mybatis映射

mybatis.mapper-locations=classpath:mapper/*Mapper.xml前端技術(shù)：VUE+layui引入vue、axios以及l(fā)ayui：<!--

引入layui

-->

<link

rel="stylesheet"

href="layui/css/layui.css">

<script

src="layui/layui.js"></script>

<script

src="js/vue.js"

type="text/javascript"

charset="utf-8"></script>

<script

src="js/axios.min.js"></script>任務(wù)二：訂單頁及購物車后端代碼： 先寫Controller層，得到查找訂單和添加訂單的數(shù)據(jù)接口。 在編寫service層，實(shí)現(xiàn)業(yè)務(wù)邏輯。其中，添加或者查看訂單，先要判斷用戶是否登錄。@Override

publicintinsert(HttpServletRequestrequest,ShoppingCarshoppingCar)throwsErrorException,GoodsError{

//通過Session判斷是否登錄

CheckLogincheckLogin=newCheckLogin();

Useruser_bySession=checkLogin.check(request);

//前端傳回的shoppingCar只攜帶了goods_id,goods_number需要吧shoppingcar_id(或者說是user_id)添加進(jìn)去

Goodsgoods=goodsDao.getById(shoppingCar.getGoods_id());//獲取數(shù)據(jù)庫的物品數(shù)量

GoodsErrorgoodsError=newGoodsError();

if(goods.getGoods_number()<shoppingCar.getGoods_number())//判斷購物車的goods數(shù)量是否超過了goods總數(shù)

throwgoodsError;

/**

*

*注意這里面的shoppingCar_id相當(dāng)于user_id

*/

shoppingCar.setShoppingcar_id(user_bySession.getUser_id());//設(shè)置shoppingCar_id等于user_id

returnshoppingCarDao.insert(shoppingCar);

} 在mapper中編寫對應(yīng)的SQL語句，實(shí)現(xiàn)數(shù)據(jù)庫的操作。<insertid="insert"parameterType="com.cdut.domain.ShoppingCar">

insertintogoods_shoppingcar(shoppingcar_id,goods_id,goods_number)VALUES(#{shoppingcar_id},#{goods_id},#{goods_number})

ONDUPLICATEKEYUPDATEgoods_number=#{goods_number}

</insert><selectid="findAll"parameterType="com.cdut.domain.User"resultType="com.cdut.domain.ShoppingCar">

selecta.shoppingcar_id,c.goods_id,c.goods_name,a.goods_number,c.goods_price,c.goods_url

fromgoods_shoppingcarasa,goodsasc

where

a.shoppingcar_id=#{user_id}

anda.goods_id=c.goods_id

</select>前端代碼： 使用axios訪問后端findall接口，得到購物車信息。instance({

method:

'get',

url:

'http://localhost:8088/api/shopping/findAll',

}).then(res

=>

{

if

(.errorCode

==

101)

{

//根據(jù)返回值進(jìn)行判斷

是否登錄

//如果登錄

獲取數(shù)據(jù)

this.shop_car

=

res.data.data

this.subMoney()

sleep(1000).then(()

=>

{

app2.change

=

true

})

}

else

if

(.errorCode

==

201)

{

show("未登錄")

sleep(1000).then(()

=>

{

window.location

=

"login.html"

})

}

}).catch(err

=>

{

console.log(err);

}) 將使用vue中的指令，將得到的數(shù)據(jù)渲染到前端頁面。<div

class="item-body-right">

<p

class="title"

id="goodsTitle"></p>

<p

class="detail"

id="detail">{{

item.goods_name

}}</p>

<div

class="money-num">

<span>￥</span><span

class="money-num-left"

id="price">{{

item.goods_price

}}元</span>

<div

class="money-num-right">

<button

class="btn"

id="reduce"

v-on:click="reduce(index)">-</button>

<span

id="num">{{item.goods_number}}</span>

<button

class="btn"

id="add"

v-on:click="add(index)">+</button>

</div>

</div>

</div>

</div>

<!--

尾部

價(jià)格

-->

<div

class="item-footer">

<p>

<span>總價(jià):</span>

<span

class="price"

id="goods-price">{{

item.goods_number*item.goods_price

}}</span><span

class="price">元</span>

</p>

</div>

</div>任務(wù)三：支付功能的實(shí)現(xiàn)準(zhǔn)備工作申請了一個(gè)支付寶開發(fā)者賬號(hào)引入alipay-easysdk<dependency>

<groupId>com.alipay.sdk</groupId>

<artifactId>alipay-easysdk</artifactId>

<version>2.0.2</version>

</dependency>進(jìn)行sdk客戶端的初始化@Override

publicvoidrun(ApplicationArgumentsargs)throwsException{

//初始化支付寶SDK

Factory.setOptions(getOptions());

System.out.println("**********支付寶SDK初始化完成**********");

}

privateConfiggetOptions(){

//這里省略了一些不必要的配置，可參考文檔的說明

Configconfig=newConfig();

tocol="https";

config.gatewayHost=this.gateway;

config.signType="RSA2";

config.appId=this.appId;

//為避免私鑰隨源碼泄露，推薦從文件中讀取私鑰字符串而不是寫入源碼中

config.merchantPrivateKey=this.privateKey;

//注：如果采用非證書模式，則無需賦值上面的三個(gè)證書路徑，改為賦值如下的支付寶公鑰字符串即可

config.alipayPublicKey=this.publicKey;

//可設(shè)置異步通知接收服務(wù)地址（可選）

config.notifyUrl=notifyUrl;

returnconfig;

}業(yè)務(wù)層代碼Controller層:如果service層調(diào)用成功的話會(huì)返回一個(gè)text表單前端對表單進(jìn)行渲染從而跳轉(zhuǎn)到支付界面里面分了請求支付以及異步通知兩個(gè)函數(shù)publicObjectpay(Ordersorders,HttpServletRequestrequest){

//這個(gè)接口其實(shí)應(yīng)該是post方式的，但是我這里圖方便，直接以get方式訪問，

//且返回格式是text/html，這樣前端頁面就能直接顯示支付寶返回的html片段

//真實(shí)場景下由post方式請求，返回code、msg、data那種格式的標(biāo)準(zhǔn)結(jié)構(gòu)，讓前端拿到data里的

//html片段之后自行加載

Messagemessage=newMessage();

Infoinfo=newInfo();

try{

returnpayService.pay(orders,request);

}

catch(ErrorExceptione){//未登錄異常

message=newMessage();

info=newInfo();

info.setInfo("notlogin");

info.setCode(info.FAIL_CODE);

message.setInfo(info);

returnmessage;

}

catch(GoodsErrorgoodsError){//商品數(shù)量異常

message=newMessage();

info=newInfo();

info.setInfo("ordergoods_numbererror");

info.setCode(info.GOODS_NUMBER_ERROR);

message.setInfo(info);

returnmessage;

}

catch(Exceptionexception){

System.out.println(exception);

message=newMessage();

info=newInfo();

info.setInfo("其他錯(cuò)誤類型");

info.setCode(info.ERROR);

message.setInfo(info);

returnmessage;

}

}

/**

*支付成功的回調(diào)

**/

@PostMapping(value="/fallback")

publicObjectfallback(HttpServletRequestrequest)throwsException{

Mapmap=request.getParameterMap();

booleansignVerfied=Factory.Payment.Common().verifyNotify(map);

if(signVerfied){

//TODO驗(yàn)簽成功后，按照支付結(jié)果異步通知中的描述，對支付結(jié)果中的業(yè)務(wù)內(nèi)容進(jìn)行二次校驗(yàn)，校驗(yàn)成功后在response中返回success并繼續(xù)商戶自身業(yè)務(wù)處理，校驗(yàn)失敗返回failure

}else{

//TODO驗(yàn)簽失敗則記錄異常日志，并在response中返回failure.

}

System.out.println("進(jìn)入了回調(diào)"+map.toString());

returnnull;

}service:進(jìn)行數(shù)據(jù)表的操作以及請求alipay生成一個(gè)表單//調(diào)用sdk，發(fā)起支付

AlipayTradePagePayResponseresponse=Factory.Payment

//選擇網(wǎng)頁支付平臺(tái)

.Page()

//調(diào)用支付方法，

//設(shè)置訂單名稱、我們自己系統(tǒng)中的訂單號(hào)、金額、回調(diào)頁面

.pay(goods.getGoods_name(),orders.getOrder_id(),String.valueOf(orders.getOrder_price()),returnUrl);前端jsbuy:function(){//購買

if(app2.user_id==-1){

notLogin()

}else{

varparam=newFormData()

param.append("user_id",app2.user_id)

param.append("goods_id",getQueryVariable("goods_id"))

param.append("order_number",app.num)

instance({

method:"post",

url:'api/pay/confirm',

data:param

}).then(res=>{

show("結(jié)算中...")

constdiv=document.createElement('divform');

div.innerHTML=res.data;

document.body.appendChild(div);

document.forms[0].acceptCharset='utf-8';//保持與支付寶默認(rèn)編碼格式一致，如果不一致將會(huì)出現(xiàn)：調(diào)試錯(cuò)誤，請回到請求來源地，重新發(fā)起請求，錯(cuò)誤代碼invalid-signature錯(cuò)誤原因:驗(yàn)簽出錯(cuò)，建議檢查簽名字符串或簽名私鑰與應(yīng)用公鑰是否匹配

document.forms[0].submit();

}).catch(err=>{

})

}

},

第三章組員鄧龍的項(xiàng)目開發(fā)工作任務(wù)一、數(shù)據(jù)庫的創(chuàng)建使用工具：PowerDesigner、DataGrip1、將項(xiàng)目中的對象分為地址模塊、用戶模塊、商戶模塊、訂單模塊、購物車模塊、商品模塊，并且確定他們各自的屬性。在PowerDesigner中建立CDM模型3、在PowerDesigner中將CMD模型轉(zhuǎn)化為LDM4、在PowerDesigner中將LDM模型轉(zhuǎn)化為PDM5、在PowerDesigner中將PDM直接轉(zhuǎn)化為.sql文件6、在DataGrip中連接數(shù)據(jù)庫并執(zhí)行生成的sql文件來創(chuàng)建數(shù)據(jù)庫任務(wù)二：編寫登錄注冊功能的相關(guān)后端業(yè)務(wù)邏輯和前端頁面展示。一、登錄功能的后端代碼編寫后端Controller，得到數(shù)據(jù)接口。@PostMapping("login")

publicMessagelogin(Useruser,HttpServletRequestrequest){

message=newMessage();

info=newInfo();

switch(userService.login(user,request)){

case101:

info.success();

message.setInfo(info);

returnmessage;

case201:

info.fail();

info.setInfo("accountnotfind");

message.setInfo(info);

returnmessage;

case401:

info.alreadyLogin();

message.setInfo(info);

returnmessage;

case301:

info.passwordError();

message.setInfo(info);

returnmessage;

default:

info.error();

message.setInfo(info);

returnmessage;

}

}編寫后端service層，實(shí)現(xiàn)業(yè)務(wù)邏輯，登錄狀態(tài)存在session中。@Override

publicintlogin(Useruser,HttpServletRequestrequest){

HttpSessionsession=request.getSession();

Useruser1=null;

user1=userDao.login(user);//查詢數(shù)據(jù)庫中的user

if(user1==null)//未查找到賬戶

returnLOGIN_FAIL;

if(!user.getUser_password().equals(user1.getUser_password()))//密碼不匹配

returnPASSWORD_ERROR;

//還需要加一個(gè)判斷是否已經(jīng)登錄

if(session.getAttribute("user_id")!=null){

if((Integer)session.getAttribute("user_id")==user1.getUser_id())//用戶已經(jīng)登錄

returnALREADY_LOGIN;

}

//寫入session

session.setAttribute("user_id",user1.getUser_id());

session.setAttribute("user_account",user1.getUser_account());

session.setAttribute("user_name",user1.getUser_name());

session.setMaxInactiveInterval(30*60);//以秒為單位，即在沒有活動(dòng)30分鐘后，session將失效

returnLOGIN_SUCCESS;

}在mapper.xml中編寫對應(yīng)的SQL語句。<selectid="login"parameterType="com.cdut.domain.User"resultType="User">

select*fromuserwhereuser_account=#{user_account}

</select>二、登錄功能的前端代碼 1、通過訪問后端的api接口，來得到對應(yīng)的狀態(tài)碼，通過返回的狀態(tài)碼來判斷賬號(hào)密碼是否正確等等。methods:

{

login:

function()

{

var

sub

=

true

if

(this.user.account

==

''

||

this.user.account

==

null)

{

window.alert('賬號(hào)為空')

sub

=

false

}

if

(this.user.password

==

''

||

this.user.password

==

null)

{

window.alert('密碼為空')

sub

=

false

}

if

(sub)

{

var

param

=

new

FormData()

param.append("user_account",

this.user.account)

param.append("user_password",

this.user.password)

axios.post("http://localhost:8088/api/user/login",

param)

.then(res

=>

{

if

(.errorCode

==

101)

{

show("登陸成功")

sleep(1000).then(()

=>

{

//

這里寫sleep之后需要去做的事情

//

window.location

=

"login.html"

history.go(-1)

location.reload();

})

}

if

(.errorCode

==

201)

{

show("未查找到賬戶")

}

if

(.errorCode

==

401)

{

show("用戶已經(jīng)登錄成功")

sleep(500).then(()

=>

{

//

這里寫sleep之后需要去做的事情

history.go(-1)

})

}

if

(.errorCode

==

901)

{

show("密碼錯(cuò)誤")

}

})

.catch(err

=>

{

console.error(err);

})

}

}

} 2、通過v-on來實(shí)現(xiàn)點(diǎn)擊事件。<div

class="main"

id="app">

<div

class="login"

v-on:keyup.enter="login">

<div

class="login-head">

<span

class="login-span">賬號(hào)登錄</span>

</div>

<div

class="login-body">

<div

class="user">

<input

v-model="user.account"

type="text"

placeholder="郵箱/賬號(hào)/手機(jī)號(hào)">

</div>

<div

class="pwd">

<input

v-model="user.password"

type="password"

placeholder="密碼">

</div>

<button

v-on:click="login">登錄</button>

<div

class="forget-pwd">

<a

href="register.html">立即注冊</a>

<span>|</span>

<a

href="#">忘記密碼?</a>

</div>三、注冊功能的后端代碼 由于注冊操作本質(zhì)是一次插入操作，所以后端代碼直接用之前寫好的增刪改查基礎(chǔ)操作即可四、注冊功能的前端代碼 1、通過正則表達(dá)式來判斷用戶注冊的格式是否正確，通過判斷輸入是否為空來對用戶操作進(jìn)行提示。最后，如果用戶注冊輸入操作正確，則通過axios來訪問后端接口來進(jìn)行數(shù)據(jù)庫的插入操作。methods:

{

submit:

function()

{

var

sub

=

true

var

account

=

/^[a-zA-Z0-9_-]{4,16}$/;

//賬號(hào)判斷

var

mail

=

/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;

if

(this.message.account

==

''

||

this.message.account

==

null)

{

window.alert('賬號(hào)為空')

sub

=

false

}

else

if

(!account.test(this.message.account))

{

window.alert('賬號(hào)格式錯(cuò)誤')

sub

=

false

}

if

(this.message.passworld1

==

''

||

this.message.passworld1

==

null)

{

window.alert('密碼為空')

sub

=

false

}

else

if

(this.message.passworld1.length

<

4)

{

window.alert('密碼太短')

}

else

if

(this.message.passworld1

!=

this.message.passworld1)

{

window.alert('兩次輸入的密碼不同')

sub

=

false

}

if

(this.message.mail

==

''

||

this.message.mail

==

null)

{

window.alert('郵箱為空')

sub

=

false

}

else

if

(!mail.test(this.message.mail))

{

window.alert('郵箱格式錯(cuò)誤')

sub

=

false

}

if

(

==

''

||

==

null)

{

window.alert('昵稱為空')

sub

=

false

}

if

(sub)

{

axios.get("http://localhost:8088/api/user/insert?user_name="

+

+

"&user_account="

+

this.message.account

+

"&user_password="

+

this.message.passworld1)

.then(res

=>

{

console.log(res)

})

.catch(err

=>

{

console.error(err);

})

}

},

} 2、通過v-model指令來得到用戶的輸入，通過v-click指令來實(shí)現(xiàn)用戶提交的點(diǎn)擊事件。

<span

v-show="info.account">賬號(hào)格式錯(cuò)誤i

請輸入以大小寫字母開頭的賬號(hào)</span>

<div

class="user">

<input

type="text"

id=""

v-model="message.account"

required

placeholder="請輸入賬號(hào)(字母開頭字符加數(shù)字的組合[4-16])">

</div>

<p>郵箱</p>

<div

class="user">

<input

type="text"

id=""

v-model="message.mail"

required

placeholder="輸入郵箱(支持各種郵箱)">

</div>

<p>昵稱</p>

<div

class="user">

<input

type="text"

id=""

v-model=""

required

placeholder="輸入昵稱(必要)">

</div>

<p>密碼</p>

<div

class="user">

<input

type="password"

v-model="message.passworld1"

id=""

required

placeholder="請輸入密碼">

</div>

<p>密碼</p>

<div

class="user">

<input

type="password"

v-model="message.passworld2"

id=""

required

placeholder="請?jiān)俅屋斎朊艽a">

</div>

<button

v-on:click="submit">立即注冊</button>

<p>

已同意并閱讀<a

href="#">小優(yōu)協(xié)議</a>

和

<a

href="#">隱私協(xié)議</a>

</p>任務(wù)三：物品頁即物品詳情頁所有物品頁后端代碼： 所有物品頁需要分頁操作，所以需要在Controller層編寫getByPage接口，來實(shí)現(xiàn)數(shù)據(jù)傳遞。@GetMapping("getByPage")

publicMessagegetByPage(Integerpage,Integerlimit){

try{

message=newMessage();

message.setData(goodsService.getByPage(page,limit));

info=newInfo();

info.success();

message.setInfo(info);

returnmessage;

}

catch(NullPointerExceptione){

System.out.println(e);

message=newMessage();

info=newInfo();

info.fail();

info.setInfo(e.toString());

message.setInfo(info);

returnmessage;

}

catch(Exceptionexception){

System.out.println(exception.getCause());

message=newMessage();

info=newInfo();

info.fail();

message.setInfo(info);

returnmessage;

}

} 在service層實(shí)現(xiàn)業(yè)務(wù)邏輯。@Override

publicList<Goods>getByPage(Integerpage,Integerlimit){

if(page==null||page==0)

page=1;

if(limit==null||limit==0)

limit=8;

returngoodsDao.getByPage((1)*limit,limit);

} 在mapper中編寫相應(yīng)的SQL語句，實(shí)現(xiàn)數(shù)據(jù)庫操作。<selectid="getByPage"parameterType="java.lang.Integer"resultType="com.cdut.domain.Goods">

select*fromgoodslimit#{0},#{1}

</select>前端代碼： 通過axios訪問getByPage接口來得到所有物品的數(shù)據(jù)，methods:

{

get_goods:

function(page,

limit)

{

instance({

method:

'get',

url:

'api/goods/getByPage?page='

+

page

+

"&limit="

+

limit,

}).then(res

=>

{

this.goods

=

res.data.data

}).catch(err

=>

{

console.log(err);

})

}

},

mounted:

function()

{

this.get_goods(page,

limit)

} 通過v-text指令來將后端的數(shù)據(jù)在前端頁面顯示

<ul>

<li

v-for="item

in

goods">

<a

v-bind:href="'goodsInfo.html?goods_id='+item.goods_id">

<span

class="goods-id"

style="display:

none;">1</span>

<img

v-bind:src="

item.goods_url

"

alt="">

<h3

class="title">{{

item.goods_name

}}</h3>

<p

class="detail">庫存:{{

item.goods_number

}}</p>

<p

class="price">

<span>{{

item.goods_price

}}元</span>

</p>

</a>

</li>

</ul>物品詳情頁后端代碼：物品詳情頁訪問的是基礎(chǔ)的增刪改查操作中的查找操作。前端代碼：通過v-text指令將后端數(shù)據(jù)渲染到前端頁面，通過v-on指令來實(shí)現(xiàn)點(diǎn)擊操作。<p

class="mall">自營</p>

<p

class="price-outer"><span

class="price"></span><span>{{

goods.goods_price*

num}}元</spa

n></p>

<hr>

<p

class="all">

<span>庫存:</span>

<span

class="repertory">{{

goods.goods_number

}}</span>

</p>

<div

class="how-much">

數(shù)量:

<button

class="btn"

id="reduce"

v-on:click="reduce">-</button>

<span

id="num">{{

num

}}</span>

<button

class="btn"

id="add

"

v-on:click="add">+</button>

</div>

<div

class="address">

<span><img

src="./img/地圖.png"

alt=""></span>

<span>所有大區(qū)</span>

</div>

<div

class="footer">