Skip to content

Commit

Permalink
perf: 优化模板分页，提高用户体验 (#49)
Browse files Browse the repository at this point in the history 
* perf: 小优化

* docs: 添加服务端启动教程

* docs: 更新本地服务上传图片失败问题处理方案

* fix: 构建预览页面实时预览，布局错乱

* fix: 处理warning

* fix: 注册成功后登录模块的输入框无法输入

* fix: node创建多级文件夹报错

* perf: 优化模板分页，提高用户体验
  • Loading branch information
@Qiu-Jun
Qiu-Jun authored May 5, 2022
1 parent 62342d9 commit 89a8e49
Show file tree
Hide file tree
Showing 6 changed files with 129 additions and 66 deletions.
31 changes: 27 additions & 4 deletions packages/mall-cook-platform/src/components/ModelsList/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,16 @@
</template>
</el-empty>
</div>

<div style="text-align: center;margin-top: 20px;">
<el-pagination
background
:page-size="paginationForm.pageSize"
layout="total, prev, pager, next"
:total="paginationForm.total"
@current-change="handleCurrentChange"
/>
</div>
</div>
</template>

Expand All @@ -72,6 +82,11 @@ export default {
industry: "",
list: [],
industryList: [{ label: "全部", value: "" }, ...mallIndustryList],
paginationForm: {
page: 1,
total: 0,
pageSize: 10
}
};
},

Expand All @@ -94,10 +109,12 @@ export default {
// 模板商城暂时只展示自己的
async getModelList() {
this.loading = true;
let { list } = await getModelList({ industry: this.industry });
this.list = list.filter(
(item) => item.userId == "618d141848f2514904ebd07e"
);
let { list, totalCount } = await getModelList({ industry: this.industry, pagination: this.paginationForm });
this.list = list
this.$set(this.paginationForm, 'total', totalCount)
// this.list = list.filter(
// (item) => item.userId == "618d141848f2514904ebd07e"
// );
this.loading = false;
},

Expand Down Expand Up @@ -144,6 +161,12 @@ export default {
console.log("预览地址1:" + url);
return jrQrcode.getQrBase64(url, options);
},


handleCurrentChange(p) {
this.$set(this.paginationForm, 'page', p)
this.getModelList()
}
},
};
</script>
Expand Down
1 change: 1 addition & 0 deletions packages/mall-cook-service/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,3 +81,4 @@ export default {
viewUrl: 'http://127.0.0.1:8081/#/' // 这个的端口不一定是8081 看你mall-cook-template启动时的端口
}
```
+ 关于分页，分页在这里提供了一个例子，在project的getModelList接口，分页方法在projectDbhelperfindModel
75 changes: 58 additions & 17 deletions packages/mall-cook-service/dbhelper/projectDbhelper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
* @LastEditors: WangYuan
* @LastEditTime: 2021-12-16 16:22:37
*/
const { ObjectId } = require('mongodb')
const mongoose = require('mongoose')
const projectModel = mongoose.model('project')
const channel = require('../utils/channel')
Expand Down Expand Up @@ -39,7 +40,6 @@ const helper = {
// 编辑
edit: data => {
return new Promise((resolve, reject) => {
console.log(data);

projectModel.updateOne({ _id: data.id }, data, (err, d) => {
if (err) {
Expand All @@ -62,25 +62,66 @@ const helper = {
})
})
},
findModel: industry => {
return new Promise((resolve, reject) => {
let query = {
type: { $eq: 'model' }
}

if (industry) {
query.industry = { $eq: industry }
}
findModel: async ({industry, page = 1, pageSize = 10}) => {

// let query = {
// type: { $eq: 'model' }
// }

projectModel.find(query, (err, data) => {
if (err) {
reject(err)
// if (industry) {
// query.industry = { $eq: industry }
// }
try {
// 这里只会查userId 为 618d141848f2514904ebd07e的数据，如果想全部模板那么就不要这个条件
// 如果你也想根据userId找，那么这里提供两个方案；1：接口把userId传过来； 2： 把userId放到jwt加密里面，使用接口时再通过jwt界面处理出userId,这样就可以根据登录用户来查
const match = {
type: { $eq: 'model' },
userId: { $eq: '618d141848f2514904ebd07e'}
}
if(industry) {
match.industry = { $eq: industry }
}
const result = await projectModel.aggregate([{
$facet: {
list: [
{
$match: match,
},
{ $skip: (page - 1) * pageSize },
{ $limit: pageSize },
],
totalCount: [
{
$match: match,
},
{ $count: 'totalCount' }
],
}
}])
if(result && result[0]) {
return {
list: result[0].list || [],
totalCount: result[0].totalCount[0].totalCount || 0
}
} else {
channel.mappingId(data)
resolve(data)
return {}
}
})
})
} catch (error) {
return {}
}




// projectModel.find(query, (err, data) => {
// if (err) {
// reject(err)
// } else {
// channel.mappingId(data)
// resolve(data)
// }
// })

}
}

Expand Down
3 changes: 3 additions & 0 deletions packages/mall-cook-service/dbhelper/userDbhelper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ const helper = {
})
})
},
findUser: (params = {}) => {
return UserMedel.findOne(params)
},
// 根据id查询详情
findById: (id) => {
return new Promise((resolve, reject) => {
Expand Down
37 changes: 23 additions & 14 deletions packages/mall-cook-service/routes/project.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ const helper = require('../dbhelper/projectDbhelper')
const channel = require('../utils/channel')
const tools = require('../utils/tools')
const config = require('../config')

const router = new Router()

router.prefix('/project')
Expand Down Expand Up @@ -81,7 +80,6 @@ router.post('/getById', async (ctx, next) => {
router.post('/getByList', async (ctx, next) => {
let name = ctx.query.name
let userId = ctx.request.body.userId

let data = await helper.findAll(userId)

data.map(item => {
Expand All @@ -98,19 +96,30 @@ router.post('/getByList', async (ctx, next) => {

// 查询商城模板列表
router.post('/getModelList', async (ctx, next) => {
let industry = ctx.request.body.industry

let data = await helper.findModel(industry)

data.map(item => {
item.id = item._id
})

ctx.body = {
list: data,
messsage: '查询成功',
status: '10000'
const { industry, pagination } = ctx.request.body
const { list: data, totalCount} = await helper.findModel({industry, ...pagination})

if(data) {
data.forEach(i => {
i.config = (i.config && typeof i.config === 'string') ? JSON.parse(i.config) : '',
i.pages = (i.pages && typeof i.pages === 'string') ? JSON.parse(i.pages) : ''
})

ctx.body = {
list: data,
totalCount,
messsage: '查询成功',
status: '10000'
}
} else {
ctx.body = {
list: [],
totalCount: 0,
messsage: '没有数据',
status: '10001'
}
}

await next()
})

Expand Down
48 changes: 17 additions & 31 deletions packages/mall-cook-service/routes/user.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,52 +23,38 @@ const router = new Router()
// 注册
router.post('/register', async (ctx, next) => {
let data = ctx.request.body
let list = await helper.findAll()
    const user = await helper.findUser({account: data.account})
if(user) {
return ctx.body = { message: '账户名已注册', status: '10003' }
}
let page = new UserModel(data)

if (list.find(item => item.account == data.account)) {
ctx.body = { message: '账户名已注册', status: '10003' }
} else {
try {
page = await page.save()
ctx.body = { message: '注册成功', status: '10000' }
} catch (e) {
ctx.body = { message: '注册失败', status: '10001' }
}
try {
page = await page.save()
ctx.body = { message: '注册成功', status: '10000' }
} catch (e) {
ctx.body = { message: '注册失败', status: '10001' }
}


await next()
})

// 登录
router.post('/login', async (ctx, next) => {
let data = ctx.request.body
let list = await helper.findAll()

let user = list.find(item => item.account == data.account && item.password == data.password)
if (user) {
console.log(user);

let token = addToken({ id: user.id, account: user.account })
let { _id, account, userName, portrait } = user
let userInfo = { userId:_id, account, userName, portrait }
ctx.body = { message: '登录成功', status: '10000', token, userInfo }
} else {
ctx.body = { message: '账户或密码不正确', status: '10001' }
}

let data = ctx.request.body
    const user = await helper.findUser({account: data.account})
    if(!user) return ctx.body = { message: '账户不存在', status: '10001' }
    if(user.password !== data.password) return ctx.body = { message: '账户或密码不正确', status: '10001' } 
    let token = addToken({ id: user.id, account: user.account })
    let { _id, account, userName, portrait } = user
    let userInfo = { userId:_id, account, userName, portrait }
    ctx.body = { message: '登录成功', status: '10000', token, userInfo }
await next()
})

// 测试
router.post('/test', async (ctx, next) => {
let token = ctx.request.header.authorization;

if (token) {
// 获取到token
console.log(token);

let res = provingToken(token);
if (res && res.exp <= new Date() / 1000) {
ctx.body = {
Expand Down

0 comments on commit 89a8e49

Please sign in to comment.