【《基于Vuejs+Nodejs的二手车交易平台设计》15000字（论文）】

。同时也因为有这大量的车辆信息来源会给平台带来大量的用户，提升点击率，由此带来了在群众中的知名度[10]。用户登录网站，进入卖车页面则可以发布自己想卖的车辆信息。方便其他人来搜索和查看车辆信息。用户卖车用例图如图2-4所示:图2-4用户卖车用例图2.2.4后台管理人员登录功能分析平台有前台自然也会有后台的存在，而后台则需要管理员的登录才能进行相应的操作。管理员登录用例图如图2-5所示:图2-5管理员登录用例图2.2.5前台用户管理功能分析作为一个二手车交易平台的后台必不可少的会有前台用户的管理，对前台用户进行一些数据的统计等等，这是有利于去收集客户样本，更好的为客户服务[11]。并且提高网站的运营效率等等。前台用户管理用例图如图2-6所示:图2-6前台用户管理用例图2.2.6车辆品牌管理功能分析二手车交易平台有强大的搜索查询功能，买家可以通过自己的需求，对于二手车的品牌进行筛选，从而能节约时间，更快的挑选到自己心仪的二手车。品牌管理用例图如图2-7所示:图2-7品牌管理用例图2.2.7车辆管理功能分析作为二手车交易平台的后台，车辆管理是必不可少的一部分。车辆管理中包括了，添加车辆种类，求购车辆信息统计以及发布的车辆信息统计几个部分组成的。添加车辆种类是可能存在本站可能没有考虑到的车辆种类，而留下的补救措施[12]。车辆管理用例图如图2-8所示:图2-8车辆管理用例图2.2.8留言评论功能分析留言评论是指前台用户可以在每个车辆信息下面对该车进行相关的留言评论。可以方便其他用户去了解该车的实际情况[13]，避免其他人去浪费时间重复一些相同的验证。用户留言评论用例图如图2-9所示:图2-9用户留言评论用例图管理员留言评论管理用例图如图2-10所示:图2-10管理员留言评论管理用例图2.2.9订单管理功能分析管理员与商家用户可以及时查看订单详情，并与买家进行及时的交流沟通，方便更好地服务买家。商家订单管理用例图如图2-11所示:图2-11商家订单管理用例图管理员订单管理用例图如图2-12所示:图2-12管理员订单管理用例图2.3非功能性需求2.3.1性能需求响应时间指功能完成的时间，和客观环境、数据量级、主观感受等都有关系。客观环境中硬件包括服务器配置、客户端机器配置等，软件包括数据库部署方式、客户端使用的浏览器等，另外还有网络环境。确定响应时间的指标，需要根据实际所需的数据量级来要求。主观感受指用户的可接受程度，例如同样的响应时间，加上进度条等处理方式，用户感受就大为不同。对响应时间，我们将页面间跳转时间控制在小于等于3秒，将精确搜索反馈结果控制在差小于等于1秒。吞吐量是给定时间内系统可处理的事务/请求的数量等，例如网络传输的数据流量。这个指标对于互联网软件更为关键，目前尚未进行定量分析和测试。并发用户数用来衡量系统的同步协调能力，需要更关注多个用户同时操作同一功能或数据时，对系统性能的影响。2.3.2产品质量需求安全性:使用者的使用权限可识别，抗干扰能力较强，对平台可以进行有效的控制。性能和效率:响应时间快，更新内容快。易用性:界面人性化，操作应简易。兼容性:可适合多浏览器运行浏览。

系统设计3.1系统总体结构本二手车交易平台的系统总体结构如图3-1所示，主要分为前台和后台两个部分。其中前台包括首页，个人信息，求购以及登录注册等几个主要功能;后台则包括商家管理，前台用户管理，车辆信息管理，评论管理以及其他几个方面。首页:则包括快速搜索，查看热门车辆，查看最新发布的二手车车辆信息。求购:包括查看详细求购信息，求购信息查询，搜索车辆信息，查看车辆信息，查看车辆信息时能够对该车辆进行评论留言。个人信息管理:个人信息包括简单信息，详细信息以及修改密码几个功能模块，可以对用户个人信息进行简单的修改。登录注册：进行注册和登录操作。其他:有添加地区省市的功能模块。用户管理：包括前台用户管理和后台商家管理。车辆管理:包括添加车辆种类和查看已发布的车辆信息，以及修改、删除车辆信息。品牌管理：添加品牌种类、删除品牌、修改品牌、查看品牌。评论管理:具有评论列表这个功能模块。订单管理：添加订单、删除订单、修改订单、查看订单。商家个人信息管理:个人信息包括简单信息，详细信息以及修改密码几个功能模块，可以对用个人信息进行修改。图3-1功能结构图3.2数据库设计3.2.1数据库概念结构设计数据库概念结构设计E-R图如图3-2所示：图3-2数据库概念结构设计E-R图3.2.2数据库逻辑设计数据库逻辑设计就是将E-R图转化成如下所示的关系模型:管理员(管理员ID，管理员名称，管理员密码)；品牌信息(品牌ID，品牌名称)；评论信息(评论ID，车辆ID，用户ID，评论内容，留言时间)；车辆信息(车辆ID，车辆品牌名称，车辆描述，品牌ID，是否发布，车辆信息，车辆价格，车辆是否评论，用户ID)；求购信息(求购ID，地区ID，车辆ID，求购数量)；地区信息(地区ID，地区编号，用户ID，地区)；用户信息(用户ID，用户名称，用户密码，用户昵称，用户自我介绍，用户性别，用户头像，用户角色)。3.2.3数据库表设计1）admins表（管理员信息表）：此表存储管理员账户的基本信息，具体如表3-1：表3-1admins表（管理员信息表）字段名类型约束说明idint主键管理员IDuserNamevarchar管理员名称passwordvarchar管理员密码2）categories表（品牌信息表）：此表存储品牌户的基本信息，具体如表3-2：表3-2categories表（品牌信息表）字段名类型约束说明idint主键品牌IDnamevarchar品牌名称3）comments表（评论信息表）：此表存储评论的基本信息，具体如表3-3：表3-3categories表（评论信息表）字段名类型约束说明idint主键评论IDgoodIdint外键车辆名称userIdint外键用户IDcontentvarchar评论内容createdAtdatetime留言时间4）goods表（车辆信息表）：此表存储车辆的基本信息，具体如表3-4：表3-4goods表（车辆信息表）字段名类型约束说明idint主键车辆IDnamevarchar车辆品牌名称descriptionvarchar车辆描述categoryIdint外键品牌IDisPubdatetime是否发布coverUrlvarchar车辆信息pricefloat车辆价格isRecommendint车辆是否评论userIdint用户ID5）orderdetails表（求购信息表）：此表存储求购的基本信息，具体如表3-5：表3-5orderdetails表（求购信息表）字段名类型约束说明idint主键求购IDorderIdint外键地区IDgoodIdint外键车辆IDnumInt求购数量6）orders表（地区信息表）：此表存储地区的基本信息，具体如表3-6：表3-6orders表（地区信息表）字段名类型约束说明idint主键地区IDnovarchar外键地区编号userIdint外键用户IDaddressvarchar地区7）users表（用户信息表）：此表存储用户的基本信息，具体如表3-7：表3-7users表（用户信息表）字段名类型约束说明idint主键用户IDuserNamevarchar用户名称passwordvarchar用户密码nickNamevarchar用户昵称introducevarchar用户自我介绍sexvarchar用户性别avatarUrlvarchar用户头像roleIdint用户角色

系统实现4.1前台登录注册实现游客可以不需要注册以及登录即可浏览二手车信息，但要想进行加入购物车等操作时需要先进行注册/登录操作。若用户还未注册账户，则用户需要先进行注册操作才能进行账户登录。用户可通过点击页面右上角的注册按钮使系统页面跳转到注册页面。在注册页面内，用户必须正确填写账号、密码等个人基本信息必填项，若未填完整，会在未填项下方显示“请完善必填项”。其中，输入的账号将作为用户账户唯一ID，应保证其输入账号正确且未进行过注册。用户进行登录操作时，需要正确填写已完成注册的账号及密码。系统前端将对用户输入的账号进行校验，若用户输入账户或密码不正确以及未输入账号或密码，系统将提示“账户或密码错误”，以保证安全性。注册页面如图4-1所示：图4-1注册页面登录页面如图4-2所示：图4-2登录页面部分代码实现：(1)注册页面部分代码:methods:

{

async

handleClose()

{

=

{}

await

this.$nextTick()

await

this.$refs.form.clearValidate()

this.$emit('update:visible',

false)

},

handleUpdate()

{

this.$refs.form.validate(async

(valid)

=>

{

if

(valid)

{

const

encryptedPassword

=

encrypt(this.$store.getters.publicKey,

.password)

const

res

=

await

register({

...,

roleId:

0,

password:

encryptedPassword,

del:

false

})

if

(res.code

===

200)

{

await

this.handleClose()

}

}

})

},

},(2)登录页面部分代码:methods:

{

handleLogin()

{

this.$refs.loginForm.validate(async

valid

=>

{

if

(valid)

{

const

encryptedPassword

=

encrypt(this.$store.getters.publicKey,

this.form.password)

const

res

=

await

login({

...this.form,

password:

encryptedPassword,

roleId:

0

})

if

(res.code

===

200)

{

this.$mit('user/SET_INFO',

)

this.$mit('user/SET_TOKEN',

res.data.token)

this.$emit('update:visible',

false)

}

}

})

},

},4.2首页实现首页通过获取各个商家发布的二手车信息来对二手车作出展示，其中管理员与卖家可以在发布前选择二手车是否上架，是否进入推荐等操作，充分展示了二手车的图片、品牌和价格等信息，点击选中的二手车，会显示详细的二手车文字和图片等信息，方便进一步了解二手车。首页还有搜索功能，可以通过搜索车辆关键字，在车辆的数据库中匹配关键字，显示筛选后的车辆，从而缩小搜索车辆范围。未登录前页面如图4-3、图4-4、图4-5、图4-6所示：图4-3未登录前可浏览的页面图4-4未登录前可浏览的页面图4-5未登录前可浏览的页面图4-6未登录前可浏览的页面登录后页面如图4-7、图4-8所示：图4-7登录后的首页图4-8登录后的首页部分代码展示：(1)首页展示部分代码:<el-header>

<div

class="banner">

<div

class="container">

<el-button

v-show="!userId"

type="text"

class="btn"

@click="ctrl.visible=true">登录</el-button>

<el-button

v-show="!userId"

type="text"

class="btn"

@click="ctrl.showRegister=true">注册</el-button>

<div

class="avatar"

v-if="userInfo">

<el-dropdown>

<el-image

style="border-radius:

50%;width:

44px;height:

44px;"

:src="userInfo.avatarUrl"

/>

<el-dropdown-menu

slot="dropdown">

<el-dropdown-item

@click.native="ctrl.showInfo=true">个人信息</el-dropdown-item>

<el-dropdown-item

@click.native="$router.push('/myOrder')">我的订单</el-dropdown-item>

<el-dropdown-item

@click.native="logout">退出登录</el-dropdown-item>

</el-dropdown-menu>

</el-dropdown>

</div>

<el-menu

:router="true"

:default-active="$route.path"

mode="horizontal">

<el-menu-item

index="/home">首页</el-menu-item>

<el-menu-item

index="/recommend">推荐</el-menu-item>

<el-menu-item

v-if="userInfo"

index="/cart">购物车</el-menu-item>

</el-menu>

<div

class="search">

<el-input

v-model="input"

/>

<el-button

type="primary"

@click="search">搜索</el-button>

</div>

<div

class="logo"></div>

</div>

</div>

</el-header>(2)搜索功能部分代码:methods:

{

logout()

{

mit('user/REMOVE_TOKEN')

mit('user/REMOVE_INFO')

},

search()

{

//

window.location.replace(`/home?input=${this.input}`)

if

(this.input

===

'')

{

if

(this.$route.query.input

===

''

||

this.$route.query.input

===

undefined)

{

window.history.replaceState('',

'',

`/home`)

Message({

message:

'搜索内容不能为空！！',

type:

'info',

duration:

3

*

1000,

})

}

}

else

if

(this.input

===

this.$route.query.input)

{

return

}

else

{

window.history.replaceState('',

'',

`/home`)

this.$router.push(`/home?input=${this.input}`)

}

},

},4.3个人信息页面实现用户登录账户后可在平台首页通过点击右上角用户头像，选择二级菜单中的“个人信息”按钮进入账户个人信息页面。在该页面，用户可以对账户、密码、昵称、头像等个人信息进行重新设置。其中，当前页面会默认显示用户账号，用户可重新账号进行绑定切换；当用户点击信息修改页面的头像按钮时，系统将弹出本地文件窗口供用户上传相关图片进行头像设置；若用户输入新昵称等个人信息，系统将修改该用户昵称等个人信息，若用户无新输入，则系统将不修改个人信息。同样，后台管理员亦可对个人信息进行这些相关操作。首页个人信息页面如图4-9所示：图4-9首页个人信息页面后台个人信息编辑页面如图4-10所示：图4-10后台个人信息编辑页面部分代码展示：(1)首页个人信息部分代码:<el-form

v-if="info"

ref="form"

:model="info"

:rules="rules"

label-position="top"

class="submit-form">

<el-form-item

prop="userName"

label="账号">

<el-input

v-model="info.userName"

/>

</el-form-item>

<el-form-item

prop="password"

label="密码">

<el-input

type="password"

v-model="info.password"

/>

</el-form-item>

<el-form-item

prop="nickName"

label="昵称">

<el-input

v-model="info.nickName"

/>

</el-form-item>

<el-form-item

prop="introduce"

label="简介">

<el-input

type="textarea"

:rows="3"

v-model="roduce"

/>

</el-form-item>

<el-form-item

prop="introduce"

label="性别">

<el-select

v-model="info.sex">

<el-option

v-for="item

in

[{label:'男',value:'1'},{label:'女',value:'0'}]"

:key="item.value"

:label="item.label"

:value="item.value">

</el-option>

</el-select>

</el-form-item>

<el-form-item

prop="avatarUrl"

label="头像">

<upload-image

:url.sync="info.avatarUrl"

/>

</el-form-item>

</el-form>(2)后台个人信息操作部分代码:data()

{

return

{

info:

{},

rules:

getRules(null,

[

'userName',

'nickName',

'avatarUrl',

'introduce',

'sex',

'password',

'phone'

]),

}

},

mounted()

{

=

{

...this.$store.getters.adminInfo,

password:

undefined

}

console.log('log

info..',

)

},

methods:

{

handleUpdate()

{

this.$refs.form.validate(async

(valid)

=>

{

if

(valid)

{

const

encryptedPassword

=

encrypt(this.$store.getters.publicKey,

.password)

const

res

=

await

updateUser({

...,

password:

encryptedPassword,

del:

false

})

if

(res.code

===

200)

{

this.$emit('update:visible',

false)

this.$mit(

'user/SET_INFO',

{

...,

password:

encryptedPassword,

del:

false

},

)

}

}

})

},

},4.4求购信息页面实现用户在进行登录后，可以进行挑选二手车操作，将看中的二手车加入购物车，在购物车中，通过加号、减号对二手车数量进行增减，在购物车中点击二手车，仍然可以跳转到二手车详情页进行查看，选定二手车后，点击右上方“提交订单”按钮，跳出下单地址框，填写地址，确认下单点击“确定”，未确认要下单点击“取消”，确认提交点后，可在右上角头像中选择二级菜单“我的订单”中查看订单详情，可在“我的订单”中进行删除订单等操作。首页购物车页面如图4-11所示：图4-11首页购物车页面首页提交订单页面如图4-12所示：图4-12首页提交订单页面用户我的订单页面如图4-13所示：图4-13用户我的订单页面部分代码展示：(1)购物车操作部分代码:ADD:

(state,

detail)

=>

{

const

goodId

=

detail.id

const

found

=

state.orderDetail.find(i

=>

i.goodId

===

goodId)

if

(found

&&

found.num

>=

0)

{

const

data

=

state.orderDetail.map(i

=>

{

if

(i.goodId

===

goodId)

{

return

{

...i,

price:

detail.price,

num:

i.num

+

1

}

}

else

return

i

})

setCart(data)

state.orderDetail

=

data

}

else

{

setCart([

...state.orderDetail,

{

goodId,

price:

detail.price,

del:

false,

num:

1

}

])

state.orderDetail

=

[

...state.orderDetail,

{

goodId,

del:

false,

price:

detail.price,

num:

1

}

]

}

},(2)我的订单操作部分代码:methods:

{

updateOrder,

async

sendGet(row)

{

await

updateOrder({

...row,

status:

2

})

await

this.getList()

},

async

send(row)

{

await

updateOrder({

...row,

status:

3

})

await

this.getList()

},

async

showDetail(row)

{

const

res

=

await

listOrderDetailByOrderId({

orderId:

row.id

})

if

(res.code

===

200)

{

this.detailList

=

res.data

this.showDetailModal

=

true

}

},

async

getList()

{

try

{

this.ctrl.loading

=

true

const

res

=

await

listOrderByUserId({

userId:

this.userId

})

if

(res.code

===

200)

{

this.tableList

=

res.data

}

}

finally

{

this.ctrl.loading

=

false

}

},

},4.5管理员登录页面实现管理员需要进行登录操作，登录后，才可进行其他操作。登陆类型选择为“管理员”，登录账号与密码都为必填项，进行登录操作时，需要正确填写管理员账号与密码，平台将对输入的账号及密码进行校验，若输入的账号或密码不正确，平台将提示“账号或密码错误”；若账号或密码为空，输入框下将提示“请完善必填项”，系统将继续等待用户输入正确信息。管理员登录页面如图4-14所示：图4-14管理员登录页面部分代码展示：管理员登录部分代码:<el-form-item

prop="name"

label="账号">

<el-input

v-model=""

type="text"

auto-complete="off"

/>

</el-form-item>

<el-form-item

prop="password"

label="密碼">

<el-input

v-model="form.password"

type="password"

auto-complete="off"

@keyup.enter.native="handleLogin"

/>

</el-form-item>

<el-form-item

prop="type"

label="登录类型">

<el-select

v-model="type"

@keyup.enter.native="handleLogin">

<el-option

v-for="item

in

[{label:'管理员',value:0},{label:'商家',value:1}]"

:key="item.value"

:label="item.label"

:value="item.value"

/>

</el-select>

</el-form-item>4.6管理员管理实现管理员登录后台后，首先可以查看各个模块，各个模块都有相应的数据库表对信息进行存储。当管理员点击左侧“用户管理”中的“用户列表”时，可以查看和搜索用户的账号、昵称、用户类型以及头像等信息，选中用户点击右侧“删除”按钮，将把该用户从数据库中删除，点击“编辑”按钮，将对该用户进行个人信息编辑操作，右上角还有“新增”按钮，通过编辑用户信息来增加用户，并将新用户信息储存进数据库。左侧的“品牌管理”与“汽车管理”和上面的“用户管理”操作类似。然后可以点击左侧“评论管理”查看到评论的详细信息，管理员可以对评论进行删除操作。接着可以点击左侧“订单管理”查看和搜索订单，点击“订单编号”可以看到订单金额等详细内容，在右侧可进行“删除”和“发货”操作，表明买家与卖家即将进行线下沟通。管理员用户管理页面如图4-15所示：图4-15管理员用户管理页面管理员品牌管理页面如图4-16所示：图4-16管理员品牌管理页面管理员汽车管理页面如图4-17所示：图4-17管理员汽车管理页面管理员评论管理页面如图4-18所示：图4-18管理员评论管理页面管理员订单管理页面如图4-19所示：图4-19管理员订单管理页面部分代码展示：(1)用户管理部分代码:mounted()

{

=

{

...this.$store.getters.adminInfo,

password:

undefined

}

console.log('log

info..',

)

},

methods:

{

handleUpdate()

{

this.$refs.form.validate(async

(valid)

=>

{

if

(valid)

{

const

encryptedPassword

=

encrypt(this.$store.getters.publicKey,

.password)

const

res

=

await

updateUser({

...,

password:

encryptedPassword,

del:

false

})

if

(res.code

===

200)

{

this.$emit('update:visible',

false)

this.$mit(

'user/SET_INFO',

{

...,

password:

encryptedPassword,

del:

false

},

)

}

}

})

},

},(2)品牌管理部分代码:

<el-table

v-loading="ctrl.loading"

:data="tableList.slice((current1)*pageSize,currentPage*pageSize)"

style="width:

100%">

<el-table-column

prop="name"

label="名称"

/>

<el-table-column

label="操作">

<template

slot-scope="{row}">

<el-button

type="text"

@click="edit('编辑分类',row)">编辑</el-button>

<el-button

type="text"

@click="handleUpdate('updateCategory',row)">删除</el-button>

</template>

</el-table-column>

</el-table>(3)汽车管理部分代码:addGood,

updateGood,

async

getCategoryList()

{

const

res

=

await

listCategory()

if

(res.code

===

200)

{

this.opts.categoryList

=

res.data

}

},

async

getList()

{

try

{

this.ctrl.loading

=

true

const

res

=

this.isAdmin

?

await

listGood()

:

await

listGoodByUserId({

userId:

this.userInfo.id

})

if

(res.code

===

200)

{

this.tableList

=

res.data

this.isSearch

=

false

this.input

=

''

}

}

finally

{

this.ctrl.loading

=

false

}

},(4)评论管理部分代码:<el-table

v-loading="ctrl.loading"

:data="tableList.slice((current1)*pageSize,currentPage*pageSize)"

style="width:

100%">

<el-table-column

label="汽车名">

<template

slot-scope="{row}">

{{

}}

</template>

</el-table-column>

<el-table-column

label="品牌">

<template

slot-scope="{row}">

{{

}}

</template>

</el-table-column>

<el-table-column

label="评论者">

<template

slot-scope="{row}">

{{

row.user.nickName

}}

</template>

</el-table-column>

<el-table-column

prop="content"

label="评论内容">

<template

slot-scope="{row}">

<span

v-html="row.content"></span>

</template>

</el-table-column>

<el-table-column

label="操作">

<template

slot-scope="{row}">

<el-button

type="text"

@click="handleUpdate('updateComment',row)">删除</el-button>

</template>

</el-table-column>

</el-table>(5)订单管理部分代码:computed:

{

userInfo()

{

return

this.$store.getters.adminInfo

},

isAdmin()

{

return

this.$store.getters.isAdmin

},

},

data()

{

return

{

showDetailModal:

false,

detailList:

[],

statusMap:

{

0:

'下单',

1:

'配送中',

2:

'已完成',

3:

'已取消',

},

currentPage:

1,

pageSize:

8,

input:

'',

isSearch:

false,

tableList:

[],

}

},

async

mounted()

{

try

{

this.ctrl.loading

=

true

await

this.$store.dispatch('common/getPublicKey')

}

finally

{

this.ctrl.loading

=

false

}

await

this.getList()

},4.7后台商家实现管理员新增商家信息后，商家需要在平台进行登录操作，将登陆类型选择为“商家”。登录账号与密码都为必填项，进行登录操作时，需要正确填写管理员账号与密码，平台将对输入的账号及密码进行校验，若输入的账号或密码不正确，平台将提示“账号或密码错误”；若账号或密码为空，输入框下将提示“请完善必填项”。登录后，商家可以点击左侧“个人信息”，对自己的个人信息进行修改。可以点击左侧“汽车管理”，查看和搜索汽车的信息，选中汽车点击右侧“删除”按钮，将把汽车删除，点击“编辑”按钮，将对该汽车进行编辑操作，右上角还有“新增”按钮，通过编辑汽车信息来增加汽车。点击左侧“订单管理”按钮，可进行查看和搜索订单，点击“订单编号”查看订单详情，右侧有“删除”键以及“发货”键，对订单进行处理。后台商家登录页面如图4-20所示：图4-20后台商家登录页面后台商家个人信息页面如图4-21所示：图4-21后台商家个人信息页面后台商家汽车管理页面如图4-22所示：图4-22后台商家汽车管理页面后台商家订单管理页面如图4-23所示：图4-23后台商家订单管理页面部分代码展示：(1)后台商家登录部分代码:<el-form-item

prop="name"

label="账号">

<el-input

v-model=""

type="text"

auto-complete="off"

/>

</el-form-item>

<el-form-item

prop="password"

label="密碼">

<el-input

v-model="form.password"

type="password"

auto-complete="off"

@keyup.enter.native="handleLogin"

/>

</el-form-item>

<el-form-item

prop="type"

label="登录类型">

<el-select

v-model="type"

@keyup.enter.native="handleLogin">

<el-option

v-for="item

in

[{label:'管理员',value:0},{label:'商家',value:1}]"

:key="item.value"

:label="item.label"

:value="item.value"

/>

</el-select>

</el-form-item>(2)后台商家汽车管理部分代码:<el-form

ref="form"

:model=""

:rules="modal.rules"

label-position="top"

class="submit-form">

<el-form-item

prop="name"

label="汽车名称">

<el-input

v-model=""

/>

</el-form-item>

<el-form-item

prop="coverUrl"

label="封面">

<upload-image

:url.sync=".coverUrl"

/>

</el-form-item>

<el-form-item

prop="description"

label="简介">

<el-input

type="textarea"

:rows="3"

v-model=".description"

/>

</el-form-item>

<el-form-item

prop="price"

label="价格">

<el-input-number

:min="0"

v-model=".price"

:precision="2"

/>

</el-form-item>

<el-form-item

prop="categoryId"

label="类别">

<el-select

v-model=".categoryId">

<el-option

v-for="item

in

opts.categoryList"

:key="item.id"

:label=""

:value="item.id"

/>

</el-select>

</el-form-item>

<el-form-item

v-if="isAdmin"

prop="isRecommend"

label="是否推荐">

<el-select

v-model=".isRecommend">

<el-option

v-for="item

in

[{label:'推荐',value:1},{label:'不推荐',value:0}]"

:key="item.value"

:label="item.label"

:value="item.value">

</el-option>

</el-select>

</el-form-item>

<el-form-item

prop="isPub"

label="是否上架">

<el-select

v-model=".isPub">

<el-option

v-for="item

in

[{label:'上架',value:true},{label:'下架',value:false}]"

:key="item.value"

:label="item.label"

:value="item.value">

</el-option>

</el-select>

</el-form-item>

</el-form>(3)后台商家订单管理部分代码:methods:

{

updateOrder,

async

send(row)

{

await

updateOrder({

...row,

status:

1

})

await

this.getList()

},

async

showDetail(row)

{

const

res

=

await

listOrderDetailByOrderId({

orderId:

row.id

})

if

(res.code

===

200)

{

this.detailList

=

res.data

this.showDetailModal

=

true

}

},

async

getList()

{

try

{

this.ctrl.loading

=

true

const

res

=

this.isAdmin

?

await

listOrder()

:

await

listOrderDetailBySellerId({

userId:

this.userInfo.id

})

if

(res.code

===

200)

{

this.tableList

=

res.data

this.isSearch

=

false

this.input

=

''

}

}

finally

{

this.ctrl.loading

=

false

}

},4.8订单及评论实现前台用户提交订单之后，可在右上角头像的二级菜单下查看订单状态为“下单”，商家和管理员在后台也可以查看相应订单状态。商家或管理员对订单进行“发货”处理，前台用户会看到订单状态变为“配送中”，再经过之后商家也就是卖家与前台用户也就是买家的线下沟通后，买家在前台对订单进行“确认收货”操作，订单状态变为“已完成”，订单结束，买家可对这次线下看车对该辆车进行评论，点击订单编号，再点击“去评价”，就可以将自己的感受记录在二手车详情页面下，方便其他人对这辆车有更深入的了解。后台商家查看订单页面如图4-24所示：图4-24后台商家查看订单页面后台管理员查看订单页面如图4-25所示：图4-25后台管理员查看订单页面后台管理员确认订单页面如图4-26所示：图4-26后台管理员确定订单页面用户查看确定订单页面如图4-27所示：图4-27用户查看确定订单页面用户确定订单页面如图4-28所示：图4-28用户确定订单页面用户订单完成页面如图4-29所示：图4-29用户订单完成页面用户评论页面如图4-30、图4-31所示：图4-30用户评论页面图4-31用户评论页面部分代码展示：(1)订单部分代码:<el-table-column

label="订单状态">

<template

slot-scope="{row}">

<span

v-if="isAdmin">{{

statusMap[row.status]

}}</span>

<span

v-else>{{

statusMap[row.order.status]

}}</span>

</template>

</el-table-column>

<el-table-column

label="操作">

<template

slot-scope="{row}">

<el-button

type="text"

@click="handleUpdate('updateOrder',row)">删除</el-button>

<el-button

type="text"

v-if="row.status===0"

@click="send(row)">发货</el-button>

<el-button

type="text"

v-else="row.order.status===0"

@click="send(row)">发货</el-button>

</template>

</el-table-column>(2)评论相关部分代码:<container>

<template

#title>

<el-button

v-if="isComment

&&

toComment"

type="primary"

style="float:

right;"

@click="commentAdd('新增评论')">新增评论</el-button>

<span

v-else

style="float:

right;font-size:

14px;color:

#999999">下单并完成订单，方可进行评论！！</span>

评论

</template>

<div

v-if="commentList.length">

<comment-item

@del="handleDeleteComment(item)"

:isEdit="item.userId===userId"

class="item"

:title="item.content"

:description="item.user.nickName"

v-for="item

in

commentList"

/>

</div>

<div

class="container"

v-else

style="text-align:

center;line-height:

80px;color:#CCC;">

暂无评论

</div>

</container>

系统测试5.1权限设置系统通过不同的角色分为普通用户和管理员，管理员帐户可以在后台在线配置，不同的角色有不同的功能权限。5.2测试目标系统开发完成后，不仅要找出系统的问题点，还要考虑各个功能是否合适，界面是否符合用户的操作习惯等进行系统测试。通过测试，找出系统需要优化处理的地方，修正系统漏洞，使系统运行更加稳定顺畅，提升用户体验。5.3测试方式二手车交易平台是需要浏览器来进行访问的，它基于Web应用，因此功能测试工作需要使用到浏览器。为了验证系统是否满足需求中的全部功能，同时满足系统设计安全性、健壮性和和易用性原则，需要对系统进行严格测试[14]。测试分为功能测试与非功能测试。①功能测试：主要涉及功能管理模块，采用黑盒测试方法，即在测试中不考虑具体的实现细节，只根据测试用例，检测与预计结果是否一致[15]；②非功能测试：采用Jmeter对商品信息页进行并发数的性能测试，测试在该并发数下持续访问系统接口的响应时间。5.4功能测试5.4.1登录注册测试登录的测试用例如表5-1所示：表5-1登录测试用例测试用例编号01功能描述登录功能用例目的检验登录功能是否正常前提条件正常进入登录页面测试输入（操作）预期结果实际结果发现问题输入正确格式的用户名不提示消息不提示消息输入错误格式的用户名提示错误信息提示错误信息点击登录提交用户名和密码正确跳转到首页用户名和密码不匹配提示错误信息用户名和密码正确跳转到首页用户名和密码不匹配提示错误信息注册的测试用例如表5-2所示：表5-2注册测试用例测试用例编号02功能描述注册功能用例目的检验注册功能是否正常前提条件正常进入注册页面测试输入（操作）预期结果实际结果发现问题输入正确格式的注册信息不提示消息不提示消息输入错误格式的注册信息提示错误信息提示错误信息点击注册提交用户存在提示信息用户不存在跳转登录页面用户存在提示信息用户不存在跳转登录页面5.4.2用户个人信息测试前台个人信息的测试用例如表5-3所示：表5-3前台个人信息测试用例测试用例编号03功能描述前台个人信息用例目的检验前台个人信息是否能正常操作前提条件正常进入个人信息页面测试输入（操作）预期结果实际结果发现问题输入必填项，保存信息成功填写个人信息后台可以查看相应个人信息成功填写个人信息后台可以查看相应个人信息修改个人信息成功修改个人信息后台可以查看相应个人信息成功修改个人信息后台可以查看相应个人信息上传头像图片显示个人头像显示个人头像后台个人信息的测试用例如表5-4所示：表5-4后台个人信息测试用例测试用例编号04功能描述后台个人信息用例目的检验后台个人信息是否能正常操作前提条件正常进入用户列表测试输入（操作）预期结果实际结果发现问题新增用户个人信息新增用户个人信息前台可以对新增用户进行操作前台可以查看相应个人信息新增用户个人信息前台可以对新增用户进行操作前台可以查看相应个人信息修改用户个人信息成功修改个人信息前台可以查看相应个人信息成功修改个人信息后台可以查看相应个人信息删除用户及个人信息成功删除用户及个人信息成功删除用户及个人信息上传头像图片显示个人头像显示个人头像5.4.3首页与购车测试首页与购车的测试用例如表5-5所示：表5-5首页与购车测试用例测试用例编号05功能描述首页与购车环节用例目的检验首页功能是否正常，对购车环节是否能正常操作等前提条件正常登录进入首页测试输入（操作）预期结果实际结果发现问题输入车辆信息关键字进行搜索正确显示车辆信息正确显示车辆信息只能按关键字顺序搜索信息查看车辆信息正确显示车辆信息正确显示车辆信息添加车辆至购物车显示至购物车在购物车中可进行删除车辆、修改车辆数量等操作显示至购物车在购物车中可进行删除车辆、修改车辆数量等操作购物车中提交订单提示填写下单地址可在我的订单中查看提示填写下单地址可在我的订单中查看对车辆进行评论未下单不可进行评论评论后显示详情未下单不可进行评论评论后显示详情5.4.4后台管理员功能测试后台管理员功能的测试用例如表5-6所示：表5-6后台管理员功能测试用例测试用例编号06功能描述后台管理员功能用例目的检验后台管理员可进行的操作是否正常前提条件正常进入管理员页面测试输入（操作）预期结果实际结果发现问题进行用户管理操作可以对前台用户进行增删改查可以对后台商家进行增删改查可以对前台用户进行增删改查可以对后台商家进行增删改查进行车辆管理操作可以对车辆进行增删改查可以对车辆进行增删改查进行品牌管理操作可以对品牌进行增删改查可以对品牌进行增删改查进行评论管理操作查看评论详情删除评论查看评论详情删除评论进行订单管理操作查看订单详情进行确认操作，查看订单状态查看订单详情进行确认操作，查看订单状态5.4.5后台商家功能测试后台商家的测试用例如表5-7所示：表5-7后台商家测试用例测试用例编号07功能描述后台商家功能用例目的检验后台商家可进行的操作是否正常前提条件正常进入后台商家管理页面测试输入（操作）预期结果实际结果发现问题编辑个人信息前台个人信息同时更新前台个人信息要多次刷新才会更新进行车辆管理操作可以对车辆进行增删改查可以对车辆进行增删改查进行订单管理操作查看订单详情进行确认操作，查看订单状态查看订单详情进行确认操作，查看订单状态5.4.6页面信息浏览测试页面信息浏览的测试用例如表5-8所示：表5-8页面信息浏览测试用例测试用例编号08功能描述页面信息浏览用例目的检验信息浏览模块