Dongguan Institute of Technology
Comprehensive Practice of "WeChat Mini Program Application Development" Course
Project Name: Campus News Website
Training report
Table of contents
1. Introduction ................................................................................................................................................................... 1
1.1 Purpose of writing
1.2 Project Background
1.3 Definition of terms
2. Task overview
2.1 Product Introduction
2.2 Product Target
2.3 Product users
2.4 Technical requirements
3. Functional requirements
3.1 Mobile terminal (foreground)
3.2 Server side (background)
3.3 Domain entities
4. Non-functional requirements
5. Business process
5.1 Mobile page operation process
5.2 Server-side page operation process
6. Requirements Modeling
6.1 Use Case Diagram
6.2 Use case description
6.3 Activity Diagram
7. Design modeling
7.1 Class Diagram
7.2 Sequence Diagram
7.3 Activity Diagrams with Swimlanes
8. Database design
8.1 ER diagram
8.2 Data Sheet
9. Implement modeling
9.1 Component Diagram
9.2 Package Diagram
9.3 Deployment Diagram
10. System running interface
10.1 Mobile interface
10.2 Server-side interface
11. Source code
11.1 Mini Program "List" page code
11.2 Mini Program "Details" page code
11.3 Mini Program "Add" page code
11.4 Mini Program "Modify" Page Code
11.5 Applet "Delete" page code
11.6 Server-side "new" record interface code
11.7 Server-side "modification" record interface code
11.8 Server side "delete" record interface code
11.9 Server-side "query" record list interface code
11.10 Server-side "query" record details interface code
1 Introduction
This report is the design and implementation document of the campus news website. This report is convenient for communication among developers, maintenance personnel, and users, and it is convenient for them to understand the implementation technology and functional manifestation of the project.
1.1 Purpose of writing
The expected readers of this report are users, system designers, and coders; it provides a common agreement between developers, maintainers, and users to create a basis to guide the realization of software functions.
This report comprehensively and generally describes the work to be completed by the campus news website, the system design scheme, and the implementation route. Through this report, we can have a comprehensive understanding of the tasks to be accomplished and the functions that the campus news website can achieve.
1.2 Project Background
With the development of dynamic website technology, the content of the website can be easily maintained and reflected in the front end in a timely manner. The front end can run on both a computer and a mobile device.
WeChat Mini Program is a new technology for developing mobile products. It transforms the webpage realization technology HTML+XML+CSS+JavaScript to realize the lightweight webpage development technology. WeChat applets are based on WXML+WXSS+ JavaScript, WXML is similar to XML, and WXSS is similar to CSS. Therefore, those who have mastered web development technology can easily transfer to the application development of WeChat applets.
1.3 Definition of terms
Java Servlet: A Java application that is loaded and run on the Web server side.
MySQL: A relational database management system based on the Structured Query Language.
campusNews: The database name of this project.
xinwenNews: The name of the data table of this project.
2. Task overview
2.1 Product Introduction
The campus news website is a kind of web application system. Customers can add, delete, check and modify news information and watch the news list by accessing the applet through the mobile browser.
2.2 Product Target
The campus news website is divided into mobile terminal operation and background service.
Operations on the mobile terminal mainly include: news list, news details, news addition, deletion and modification.
The background service mainly includes: an interface for adding, deleting, checking and modifying news based on Java Servlet.
2.3 Product users
The operating user of this applet: mobile terminal users.
2.4 Technical requirements
1. Based on JavaScript language and Java Servlet technology. JDK virtual machine, MySQL database, Web server Tomcat, database server Apache.
2. Win2000/XP/win7/win8/win2008 operating system.
3. IE browser, Google Chrome browser, 360 browser and other mainstream browsers.
4. Small programs on mobile phones.
3. Functional requirements
3.1 Mobile terminal (foreground)
Table 1 Functional requirements of the mobile terminal (mainly explaining the WXML, WXSS, and JS corresponding to the applet page)
| Functional category |
function name, identifier |
describe |
| news list |
onShow: function (options) |
Request data to the backend through request |
| dian:function(e) |
Click on an item in the news list to jump to the corresponding details page |
|
| new news |
chooseimage(e) |
Select the pop-up setting for image upload: local upload or photo upload |
| chooseWxImage: function (type) |
Upload the image to the server, call the corresponding api to upload to the server |
|
| toAddNews(e) |
Add new news and upload data to the backend |
|
| edit news |
onLoad: function (options) |
Use the lifecycle function to load the initial binding data |
| chooseimage(e) |
Select the pop-up setting for image upload: local upload or photo upload |
|
| chooseWxImage: function (type) |
Upload the image to the server, call the corresponding api to upload to the server |
|
| toUpdate(e) |
Upload the modified data to the backend |
|
| delete news |
del:function(e) |
Click the delete button, a pop-up window will appear to remind you whether to delete |
3.2 Server side (background)
Table 2 Functional requirements on the server side (mainly explaining the interface for adding, deleting, checking and modifying records)
| Functional category |
function name, identifier |
describe |
| Inquire |
List<New> getAllNewsList(); |
Query news list |
| New getNewsById(int id); |
query news |
|
| Increase |
int addNews(New news); |
add news |
| Revise |
int updateNews(New news); |
edit news |
| delete |
int deleteNewsById(int id); |
delete news |
3.3 Domain entities
1. News: id, title, release date, photo, content.
4. Non -functional requirements
Table 3 Non-functional requirements
| demand category |
Requirement name, identifier |
describe |
| User Interface Requirements |
Requirement UI.1 |
|
| Requirement UI.2 |
||
| Constraint requirements |
Requirement LC.1 |
|
| Requirement LC.2 |
||
| Software and hardware requirements |
Requirement SH.1 |
|
| Requirement SH.2 |
6.2 Use case description
6.2.1 Use Case Description of the "News List" Use Case
Use case name: news list.
Brief description of the use case: In this use case, after the user opens the applet, all the news in the database will be displayed in a list.
Actors: users.
Precondition: The user opens the applet.
Postcondition: If the use case is executed successfully, display all news data in the database in a list.
The main event flow is as follows:
(1) The user opens the applet.
(2) The applet reads the database, and the database returns all news data.
(3) The applet displays news data to the interface in the form of a list.
6.2.2 Use Case Description of "News Details" Use Case
Use case name: News Details.
Brief description of the use case: the user clicks on a news in the list to jump to the detailed page of the news.
Actors: users.
Precondition: Before using this use case, you need to open the news list.
Post-condition: If the use case is executed successfully, display the news detail page clicked by the user.
Main event stream:
- The user clicks on a news item in the news list.
- The applet reads the database, and the database returns the data of the news.
- The applet displays the detail page of the news.
6.2.3 Use case description of the "new news" use case
Use Case Name: Add News.
Brief description of the use case: This use case adds new news to the database after the administrator opens the applet.
Participants: Administrators.
Precondition: The administrator opens the applet.
Post-condition: If the use case is successfully executed, a new news record is added to the database.
The main event flow is as follows:
- The administrator selects the "Add News" option.
- The applet to open the news blank page is written by the administrator.
- After the administrator finishes writing, submit it to the database.
- The database record is successfully added, and the record information is returned.
- The applet displays record information, indicating that the submission is successful.
6.2.4 Use Case Description of the "Modify News" Use Case
Use case name: modify news.
Brief description of the use case: In this use case, after the administrator opens the applet, the original news is modified in the database.
Participants: Administrators.
Precondition: The administrator opens the applet.
Postcondition: If the use case is executed successfully, update a news record in the database.
The main event flow is as follows:
- The administrator selects the "Modify News" option.
- The applet requests database data.
- The database returns all news data, and the applet presents them in a list.
- The administrator selects the news to be modified and opens the news modification page.
- After the administrator completes the modification, submit it to the database.
- The database modification data is completed, and the record information is returned.
- The applet prompts that the modification is successful.
6.2.5 Use Case Description of "Delete News" Use Case
Use case name: delete news.
Brief description of the use case: This use case deletes new news from the database after the administrator opens the applet.
Participants: Administrators.
Precondition: The administrator opens the applet.
Postcondition: If the use case is executed successfully, delete a news record in the database.
The main event flow is as follows:
- The administrator selects the "Delete News" option.
- The applet requests database data.
- The database returns all news data, and the applet presents them in a list.
- The administrator selects the news to be deleted and confirms again.
- After the administrator confirms, the record in the database will be deleted.
- The database deletes the record successfully, and returns the deletion information.
- The applet displays the record information, indicating that the deletion is successful.
8. Database design
8.2 Data Sheet
| field |
type |
length |
type |
default |
| id |
int |
primary key |
||
| title |
varchar |
50 |
non empty |
|
| img |
varchar |
128 |
non empty |
|
| content |
varchar |
65535 |
non empty |
|
| ctime |
timestamp |
Data update time |
10. System running interface
10.1 Mobile interface
news list:
News details:
Test additions:
Added picture pop-up window: You can upload local pictures or take photos.
Added modification success interface:
After the modification is successful, it is presented on the front-end interface through the back-end success data binding.
Delete Confirmation:
Click the × in the lower right corner of the deleted picture to confirm the deletion
Modify interface:
Click the edit button below the picture to enter the edit interface and get the corresponding data to be automatically filled
10.2 Server-side interface
11. Source code
11.1 Mini Program "List" page code
// pages/list.js
Page({
/** * 页面的初始数据** */
data: {
id1: 1,
shuzu: []
},
/** * 生命周期函数--监听页面加载*** */
onShow: function (options) {
var that = this
wx.request({
url: 'http://localhost/news', //仅为示例，并非真实的接口地址
// data: {
// x: '',
// y: ''
// },
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res)
that.setData({
shuzu: res.data
})
}
})
},
dian: function (e) {
var a = e.target.id
console.log(a)
wx.navigateTo({
url: "/pages/detail/detail?id=" + a,
})
},
/*** 用户点击右上角分享*/
onShareAppMessage: function () {}
})
<view class="body ">
<!--文章列表模板 begin-->
<template name="a" type="text/html">
<navigator bindtap="dian" url="../../pages/detail/detail?id={
{id}}" hover-class="navigator-hover">
<view class="card view-flex">
<view class="imgs">
<image src="{
{img}}" class="in-img" background-size="cover" mode="aspectFill"></image>
</view>
<view class="title">{
{title}}</view>
<view class="infos">
<view class="date">{
{ctime}}</view>
</view>
</view>
</navigator>
</template>
<!--文章列表模板 end-->
<!--循环输出列表 begin-->
<view wx:for="{
{shuzu}}" class="list" wx:key="id">
<template is='a' data="{
{...item}}"></template>
</view>
</view>/* pages/list.wxss */
.body {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.view-flex{
background-color:beige;
display:flex;
flex-wrap:wrap;
flex-direction:row;
justify-content: space-between
}
.card{
height: 350rpx;
}
navigator {
overflow: hidden;
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
}
.list {
margin-top: 30rpx;
height: 20%;
width: 92%;
position: relative;
/* border: 1px solid black; */
border-radius: 15px;
overflow: hidden;
background-color: rgb(255, 255, 255);
box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .6);
}
.imgs {
width: 30%;
height: 21vh;
}
.imgs image {
margin-top: 30rpx;
display: block;
width: 200rpx;
height: 100%;
margin-left: 20rpx;
}
.infos {
display: flex;
width: 60%;
height: 21vh;
flex-direction: column;
margin-left: 6px;
}
.title {
margin-top: 30rpx;
display: block;
width:450rpx;
height: 200rpx;
font-size: 1.2em;
overflow: hidden;
text-align-last: left;
}
.date {
text-align: left;
width: 100%;
height: 100rpx;
font-size: 1em;
margin-top: 50rpx;
color: #aaa;
}
.loadMore {
text-align: center;
margin: 30px;
color: #aaa;
font-size: 16px
}11.2 Mini Program "Details" page code
// pages/change/change.js
Page({
/**
* 页面的初始数据
*/
data: {
id: 1,
shuzu: [],
success: false,
img: '',
cTime: '',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this
console.log(that.data)
that.setData({
id: options.id
})
wx.request({
url: 'http://localhost/news/' + that.data.id,
method: 'GET',
success(res) {
that.setData({
shuzu: res.data,
img: res.data.img,
// cTime:res.data.ctime
})
}
})
},
return_home: function (e) {
wx.switchTab({
url: '/pages/list/list',
})
},
})<!--detail.wxml-->
<view class="warp">
<view class="title">{
{shuzu.title}}
<view class="cTime">{
{shuzu.ctime}}</view>
</view>
<view class="img">
<image src="{
{shuzu.img}}" class="in-img" background-size="cover" model="scaleToFill"></image>
</view>
<text class="content" space="ensp" decode="{
{true}}">{
{shuzu.content}}</text>
<button class="close" bindtap="return_home">返回</button>
</view>.warp {
height: 100%;
display: flex;
flex-direction: column;
padding: 20rpx;
font-size: 16px;
justify-content: center;
width: 700rpx;
padding-left: 40rpx;
}
.title {
text-align: center;
padding: 20rpx;
font-size: 20px;
}
.cTime {
padding-top: 10px;
text-align: center;
font-size: 14px;
color: #aaa;
}
.img {
text-align: center;
padding: 20rpx;
}
.img image {
width: 120px;
height: 120px;
}
.content {
text-indent: 2em;
width:650rpx;
}
.close {
margin-top: 30px;
width: 80%;
background-color: rgb(252, 126, 67);
color: white;
border-radius: 98rpx;
background: bg_red;
}
/* 按下变颜色 */
.hover {
top: 3rpx;
background: rgb(236, 179, 156);
}11.3 Mini Program "Add" page code
// pages/addNews/addNews.js
Page({
data: {
shuzu: [],
success: false,
img: '',
},
return_home: function (e) {
var that = this
that.setData({
success: false
})
wx.switchTab({
url: '/pages/list/list',
})
},
getvalue(e) {
console.log(e.detail)
},
toAddNews(e) {
var that = this
console.log(e.detail.value.title)
wx.request({
url: 'http://localhost/news/',
data: {
title: e.detail.value.title,
content: e.detail.value.content,
img: that.data.img,
},
method: "POST",
success(res) {
console.log('success!')
that.setData({
success: true,
img: '',
})
}
})
},
chooseimage(e) {
var that = this;
wx.showActionSheet({
itemList: ['从相册选择', '拍照'],
itemColor: "#CED63A",
success: function (res) {
if (!res.cancel) {
if (res.tapIndex == 0) {
that.chooseWxImage('album')
} else if (res.tapIndex == 1) {
that.chooseWxImage('camera')
}
}
}
})
},
chooseWxImage: function (type) {
var that = this
wx.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: [type],
count: 1,
success: function (res) {
console.log(res)
that.setData({
img: res.tempFilePaths[0],
})
}
})
},
})<!--pages/addNews/addNews.wxml-->
<view wx:if="{
{!success}}">
<form bindsubmit="toAddNews">
<view class='row'>
<view class='info'>
<input name="title" id="title" class='info-input1' placeholder="请输入新闻标题" bindinput="getvalue" />
</view>
</view>
<view class="tui-menu-list" id="view1" style="display:flex;flex-direction:space-between">
<button id="b1" size="mini" type="primary" bindtap="chooseimage">
获取图片
</button>
</view>
<image src="{
{img}}" catchtap="chooseImageTap" mode="aspectFit" style="width:100%;height:400px;background-color:#ffffff;">
</image>
<view class='row'>
<view class='info'>
<textarea name="content" maxlength="-1" id="content" class='info-input' placeholder="请输入新闻内容"></textarea>
</view>
</view>
<view class="btnArea">
<button class='goodbutton' form-type="submit" hover-class="hover">提交</button>
</view>
</form>
</view>
<view class='success' wx:if="{
{success}}">
<view class='cheer'>
<icon type="success" size="24" /> 添加新闻成功!
</view>
<button type="default" class='return' bindtap='return_home'>返回首页</button>
</view>page {
background: #F0F0F0;
}
.row {
margin-top: 20rpx;
overflow: hidden;
line-height: 100rpx;
border-bottom: 1rpx solid #ccc;
margin-left: 20rpx;
margin-right: 20rpx;
color: #777;
background: #fff;
}
.info-input {
height: 400rpx;
margin-left: 50rpx;
color: #777;
float: left;
}
.info-input1 {
height: 100rpx;
margin-left: 50rpx;
color: #777;
font-weight: 800;
font-size: large;
float: left;
width: 420rpx;
}
.info-input2 {
height: 100rpx;
margin-left: 50rpx;
color: #777;
float: left;
width: 420rpx;
}
.button {
width: 200rpx;
height: 70rpx;
line-height: 70rpx;
font-size: 28rpx;
background: #33FF99;
float: left;
margin-left: 10rpx;
margin-top: 15rpx;
color: #FFFFFF;
}
.submit {
margin-top: 50rpx;
margin-left: 20rpx;
margin-right: 20rpx;
background: #00CCFF;
color: #FFFFFF;
}
.success {
background: #ffffff;
}
.cheer {
text-align: center;
line-height: 400rpx;
font-size: 60rpx;
position: relative;
}
.return {
margin: 20rpx;
}
/* border-radius: 98rpx;是控制按钮边变圆 */
.goodbutton {
margin-top: 30px;
width: 80%;
background-color: rgb(252, 126, 67);
color: white;
border-radius: 98rpx;
background: bg_red;
}
/* 按下变颜色 */
.hover {
top: 3rpx;
background: rgb(236, 179, 156);
}11.4 Applet "Modify" page code
// pages/change/change.js
Page({
/**
* 页面的初始数据
*/
data: {
id: 1,
shuzu: [],
success: false,
img: '',
cTime: '',
title: '',
content: '',
tempFilePaths:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this
console.log(that.data)
that.setData({
id: options.id
})
wx.request({
url: 'http://localhost/news/' + that.data.id,
method: 'GET',
success(res) {
that.setData({
shuzu: res.data,
img: res.data.img,
cTime: res.data.ctime,
title: res.data.title,
content: res.data.content
})
}
})
},
chooseimage(e) {
var that = this;
wx.showActionSheet({
itemList: ['从相册选择', '拍照'],
itemColor: "#CED63A",
success: function (res) {
if (!res.cancel) {
if (res.tapIndex == 0) {
that.chooseWxImage('album')
} else if (res.tapIndex == 1) {
that.chooseWxImage('camera')
}
}
}
})
},
chooseWxImage: function (type) {
var that = this
wx.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: [type],
count: 1,
success: function (res) {
console.log(res)
that.setData({
img: res.tempFilePaths[0],
})
}
})
},
return_home: function (e) {
wx.switchTab({
url: '/pages/list/list',
})
},
toUpdate(e) {
var that = this
wx.request({
url: 'http://localhost/news/',
data: {
// title: e.detail.value.title,
id: that.data.id,
title: that.data.title,
cTime: that.data.ctime,
img: that.data.img,
content: that.data.content
// content: e.detail.value.content
},
method: "PUT",
success(res) {
console.log('success!')
console.log(e.detail)
that.setData({
success: true
})
}
})
},
handleInputTitle(e) {
this.setData({
title: e.detail.value
})
},
handleInputInfo(e) {
this.setData({
content: e.detail.value
})
}
})<view wx:if="{
{!success}}">
<form bindsubmit="toUpdate">
<view class='row'>
<view class='info'>
<textarea name="title" id="title" class='info-input1' bindinput="handleInputTitle" value="{
{shuzu.title}}"></textarea>
</view>
</view>
<view class="tui-menu-list" id="view1" style="display:flex;flex-direction:space-between">
<button id="b1" size="mini" type="primary" bindtap="chooseimage">
更改图片
</button>
</view>
<image id="img" src="{
{img}}" catchtap="chooseImageTap" mode="aspectFit" style="width:100%;height:400px;background-color:#ffffff;">
</image>
<view class='row'>
<view class='info'>
<textarea space="ensp" decode="{
{true}}" maxlength="-1" name="content" id="content" class='info-input' bindinput="handleInputInfo" value="{
{shuzu.content}}"></textarea>
</view>
</view>
<view class="btnArea">
<button class='goodbutton' form-type="submit" hover-class="hover" bindtap="toUpdate">提交</button>
</view>
</form>
</view>
<view class='success' wx:if="{
{success}}">
<view class='cheer'>
<icon type="success" size="24" /> 修改新闻成功!
</view>
<button type="default" class='return' bindtap='return_home'>返回首页</button>
</view>page {
background: #F0F0F0;
}
.row {
margin-top: 20rpx;
overflow: hidden;
line-height: 100rpx;
border-bottom: 1rpx solid #ccc;
margin-left: 20rpx;
margin-right: 20rpx;
color: #777;
background: #fff;
}
.info-input {
height: 650rpx;
margin-left: 20rpx;
margin-right: 20rpx;
color: #777;
float: left;
}
.info-input1 {
height: 200rpx;
margin-left: 50rpx;
margin-right: 20rpx;
color: #777;
font-weight: 800;
font-size: large;
float: left;
width: 600rpx;
}
.info-input2 {
height: 100rpx;
margin-left: 50rpx;
color: #777;
float: left;
width: 420rpx;
}
.button {
width: 200rpx;
height: 70rpx;
line-height: 70rpx;
font-size: 28rpx;
background: #33FF99;
float: left;
margin-left: 10rpx;
margin-top: 15rpx;
color: #FFFFFF;
}
.submit {
margin-top: 50rpx;
margin-left: 20rpx;
margin-right: 20rpx;
background: #00CCFF;
color: #FFFFFF;
}
.success {
background: #ffffff;
}
.cheer {
text-align: center;
line-height: 400rpx;
font-size: 60rpx;
position: relative;
}
.return {
margin: 20rpx;
}
/* border-radius: 98rpx;是控制按钮边变圆 */
.goodbutton {
margin-top: 30px;
width: 80%;
background-color: rgb(252, 126, 67);
color: white;
border-radius: 98rpx;
background: bg_red;
}
/* 按下变颜色 */
.hover {
top: 3rpx;
background: rgb(236, 179, 156);
}11.5 Applet "delete" page code
// pages/oprateNews/operateNews.js
// pages/list.js
Page({
/** * 页面的初始数据** */
data: {
id1: 1,
shuzu: []
},
/** * 生命周期函数--监听页面显示*** */
onShow: function (options) {
var that = this
wx.request({
url: 'http://localhost/news/', //仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res)
that.setData({
shuzu: res.data
})
}
})
},
dian: function (e) {
var a = e.target.id
console.log(a)
wx.navigateTo({
url: "/pages/detail/detail?id=" + a,
})
},
change: function (e) {
var id = e.currentTarget.dataset.word
var that = this
console.log('修改文章' + id)
wx.navigateTo({
url: '/pages/change/change?id=' + id,
})
},
del: function (e) {
var id = e.currentTarget.dataset.word
var that = this
console.log('删除文章 ' + id)
wx.showModal({
title: '提示',
content: '是否确认删除',
cancelColor: 'cancelColor',
cancelText: '取消',
confirmColor: 'red',
confirmText: '删除',
success: function (res) {
if (res.cancel) console.log('取消删除操作')
else {
wx.request({
url: 'http://localhost/news/' + id,
method: "DELETE",
success: function (res) {
console.log('success!')
that.onShow()
}
})
}
}
})
},
showOperate(e) {
var id = e.currentTarget.dataset.word
console.log(id)
wx.showActionSheet({
itemList: ['修改', '删除'],
alertText: '你正在进行操作',
success(res) {
if (res.tapIndex == 0) {
console.log('修改文章' + id)
wx.navigateTo({
url: '/pages/change/change?id=' + id,
})
} else if (res.tapIndex == 1) {
var that = this
console.log('删除文章 ' + id)
wx.showModal({
title: '提示',
content: '是否确认删除',
cancelColor: 'cancelColor',
cancelText: '取消',
confirmColor: 'red',
confirmText: '删除',
success: function (res) {
if (res.cancel) console.log('取消删除操作')
else {
wx.request({
url: 'http://localhost/news/' + id,
method: "DELETE",
success: function (res) {
console.log('success!')
}
})
}
}
})
}
},
fail(res) {
console.log(res.errMsg)
}
})
},
/*** 用户点击右上角分享*/
onShareAppMessage: function () {}
})<!--pages/oprateNews/operateNews.wxml-->
<view class="body">
<!--文章列表模板 begin-->
<template name="itmes">
<view class="pan">
<navigator url="../../pages/detail/detail?id={
{id}}" hover-class="navigator-hover">
<view class="imgs">
<image src="{
{img}}" class="in-img" background-size="cover" mode="aspectFill"></image>
</view>
<view class="infos">
<view class="title">{
{title}}</view>
<view class="date">{
{cTime}}</view>
</view>
</navigator>
<icon class="delete" type="cancel" size="60rpx" bindtap="del" data-word="{
{id}}"></icon>
<button style="width:80rpx;height:48rpx;padding:10rpx;" class="setBtn" bindtap="change" data-word="{
{id}}">修改</button>
</view>
</template>
<!--文章列表模板 end-->
<!--循环输出列表 begin-->
<view class="pan view-flex">
<view wx:for="{
{shuzu}}" class="list" wx:key="id">
<template is="itmes" data="{
{...item}}" />
</view>
</view>
</view>.view-flex{
background-color:beige;
display:flex;
flex-wrap:wrap;
flex-direction:row;
justify-content: space-between;
margin-top: 20rpx;
}
.list{
position: relative;
width: 350rpx;
height: 600rpx;
border-radius: 15px;
overflow: hidden;
background-color: rgb(255, 255, 255);
box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .6);
margin-left: 20rpx;
margin-top: 20rpx;
}
.imgs{
width: 300rpx;
height: 300rpx;
align-items: center;
margin-left: 20rpx;
margin-top: 20rpx;
}
.in-img{
width: 300rpx;
height: 300rpx;
}
.infos{
width: 330rpx;
margin-top: 20rpx;
margin-left: 20rpx;
align-items: center;
height: 280rpx;
}
.title{
font-weight: 800;
overflow: hidden;
height: 200rpx;
}
.date{
font-size: smaller;
color: gray;
}
.delete{
position: absolute;
left: 280rpx;
top: 525rpx;
}
.setBtn{
position: absolute;
left: 200rpx;
top: 530rpx;
font-size: 10px;
background-color: lightsalmon;
color:white;
}11.6 Server-side "new" record interface code
@Insert("insert into news values (#{id},#{title},#{img},#{content},#{cTime})")
int addNews(New news);
11.7 Server-side "modification" record interface code
@Update("update news set title = #{title}, content = #{content}, img = #{img} where id = #{id}")
int updateNews(New news);
11.8 Server side "delete" record interface code
@Delete("delete from news where id = #{id}")
int deleteNewsById(int id);
11.9 Server-side "query" record list interface code
@Select("select * from news")
List<New> getAllNewsList();
11.10 Server-side "query" record details interface code
@Select("select * from news where id = #{id}")
New getNewsById(int id);