客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称：FinGet/koa-nuxt-mall开源软件地址：https://github.com/FinGet/koa-nuxt-mall开源编程语言：Vue 55.1%开源软件介绍：
项目目录先来看看整个项目的目录结构，不容易迷路。 ├── .nuxt # nuxt 编译的文件 ├── assets # 静态资源 ├── components # 组件 │ └── banner.vue # 轮播图组件 │ └── footer.vue # footer组件 │ └── goods.vue # 首页商品组件 │ └── search.vue # 搜索组件 │ └── topBar.vue # topBar组件 │ └── user.vue # 用户信息组件 ├── layout │ ├── default.vue # 默认布局文件 ├── middleware # 中间件 │ ├── auth.js # 用户是否登录 └── pages │ └── detail │ └── _id.vue # 商品详情页 │ └── cartLists.vue # 购物车页 │ └── form_mixins.js # 登录注册表单验证mixins │ └── index.vue # 首页 │ └── login.vue # 登录页 │ └── register.vue # 注册页 └── plugins │ └── axios.js # axios配置 │ └── element-ui.js # elementui │ └── filters.js # 过滤器 └── store │ └── index.js # vuex状态管理 └── server # koa服务端 │ └── dbs # mongodb数据库配置 │ └── models # models │ └── banner.js # 轮播图model │ └── goods.js # 商品model │ └── user.js # 用户model │ └── config.js # 数据库配置连接 │ └── routers # 服务端路由 │ └── banner.js # 轮播图路由 │ └── goods.js # 商品路由 │ └── users.js # 用户路由 │ └── utils # 工具函数 │ └── passport.js # passport登录验证中间件 │ └── index.js # 服务端入口 └── static └── nuxt.config.js # nuxt配置文件 安装运行项目这个项目中要用到Mongodb，所以必须安装。
https://www.runoob.com/mongodb/mongodb-osx-install.html
https://www.runoob.com/mongodb/mongodb-window-install.html
https://github.com/FinGet/koa-nuxt-mall
项目中还用到了Redis来存储session，也可以不用，直接存在内存中。 从零开始手撸Init Projectnpx create-nuxt-app nuxt-koa-mall
// axios + koa + elementui + Eslint 就选这几样
// Install
yarn add @nuxtjs/axios
// SetUp nuxt.config.js
modules: [
'@nuxtjs/axios'
],
plugin: [
'~/plugins/axios'
]
// plugins/axios.js
export default function ({ $axios, redirect }) {
$axios.onRequest(config => {
console.log('Making request to ' + config.url)
})
$axios.onResponse(response => {
// console.log(response)
if(response.status == 200) {
return response.data;
}
})
$axios.onError(error => {
const code = parseInt(error.response && error.response.status)
if (code === 400) {
redirect('/400')
}
})
}
// Install
yarn less less-loader @nuxtjs/style-resources
// SetUp nuxt.config.js
modules: [
'@nuxtjs/style-resources'
],
styleResources: {
// 全局注入 less变量 这样在任何页面都可以使用 variate \ mixins
less: ['./assets/css/variate.less','./assets/css/mixins.less']
},
Nuxt 开发页面layouts 页面默认情况下, // 在页面中设置layout
export default {
layout: 'blank' //默认是default
}// 在layout中
<template>
<div>
<nuxt /> // 这个是必须定义的，就像是vue的router-view
</div>
</template>全局过滤器Nuxt的全局过滤器，定义在plugins下面，在 // plugins/filters
import Vue from 'vue';
Vue.filter('moneyFormat', (value) => {
return `${value}.00`
});
// nuxt.config.js
plugins: [
'~/plugins/filters'
],Nuxt路由
在pages下面新建一个vue文件就会生成一个对应的路由，文件名就是路由名。
在这个项目中，商品详情页就是动态路由。在 Nuxt.js 生成对应的路由配置表为: router: {
routes: [
{
name: 'detail-id',
path: '/detail/:id?',
component: 'pages/detail/_id.vue'
},
]
}更多路由配置去官网查看 asyncData 和 fetch
Vuexlet store = () => new Vuex.Store({
state,
mutations,
actions
})
export default store
koa服务端
用到的几个插件： yarn add koa-json koa-generic-session koa-bodyparser koa-redis koa-passport passport-local koa-router mongoosekoa-json
var json = require('koa-json');
var Koa = require('koa');
var app = new Koa();
app.use(json());
app.use((ctx) => {
ctx.body = { foo: 'bar' };
});$ GET /
{
"foo": "bar"
}koa-bodyparserkoa.js并没有内置Request Body的解析器，当我们需要解析请求体时需要加载额外的中间件，官方提供的koa-bodyparser是个很不错的选择，支持x-www-form-urlencoded, application/json等格式的请求体，但不支持form-data的请求体。
var bodyParser = require('koa-bodyparser');
var Koa = require('koa');
var app = new Koa();
app.use(bodyParser({
enableTypes:['json', 'form', 'text']
}))koa-generic-session这就是koa的seesion中间件。 const session = require('koa-generic-session');
const Koa = require('koa');
app.keys = ['keys', 'keyskeys']
app.use(session({
key: 'fin',
prefix: 'fin:uid',
maxAge: 1000, /** (number) maxAge in ms (default is 1 days)，cookie的过期时间 */
overwrite: true, /** (boolean) can overwrite or not (default true) */
httpOnly: true, /** cookie是否只有服务器端可以访问 (boolean) httpOnly or not (default true) */
signed: true, /** (boolean) signed or not (default true) */
store: new Redis() // 将session存入redis 不传options 默认就是连接127.0.0.1:6379
}))koa-passport这是这个项目中很重要的一个中间件。大概逻辑就是，用户登录,它就帮忙把用户信息存在session里，在浏览器端也会生成对应的cookie,还提供了几个方法
const passport = require('koa-passport')
const LocalStrategy = require('passport-local')
const User = require('../dbs/models/user')
// 提交数据(策略)
passport.use(new LocalStrategy({
usernameField: 'userName',
passwordField: 'userPwd'
},async function(username,password,done){
let where = {
userName: username
};
let result = await User.findOne(where)
if(result!=null){
if(result.userPwd===password){
return done(null,result)
}else{
return done(null,false,'密码错误')
}
}else{
return done(null,false,'用户不存在')
}
}))
// 序列化ctx.login()触发
passport.serializeUser(function(user,done){
// 用户登录成功之后，会把用户数据存到session当中
done(null,user)
})
// 反序列化（请求时，session中存在"passport":{"user":"1"}触发）
passport.deserializeUser(function(user,done){
return done(null,user)
})
module.exports = passportconst passport = require('./utils/passport');
const Koa = require('koa');
const app = new Koa();
app.use(passport.initialize())
app.use(passport.session())
默认情况下passport使用username和password,也可以自由定义： passport.use(new LocalStrategy({
usernameField: 'userName',
passwordField: 'password'
},
function(username, password, done) {
// ...
}
));
点击这里：passport学习资料。 mongodb
MongoDB 将数据存储为一个文档，数据结构由键值(key=>value)对组成。MongoDB 文档类似于 JSON 对象。字段值可以包含其他文档，数组及文档数组。
mongoose里面有三个概念，schemal、model、entity:
const mongoose = require('mongoose')
const dburl = 'mongodb://127.0.0.1:27017/mall' // mall代表数据库名称
// 链接MongoDB数据库
const db = mongoose.connect(dburl)
// 链接成功
mongoose.connection.on("connected", function() {
console.log("MongoDB connected success")
})
// 链接失败
mongoose.connection.on("error", function() {
console.log("MongoDB connected error")
})
// 断开了
mongoose.connection.on("disconnected", function() {
console.log("MongoDB connected disconnected")
})
module.exports = db;
就是mysql里的表结构。 模型使用
const mongoose = require('mongoose')
const Schema = mongoose.Schema
// 定义模型
const produtSchema = new Schema({
"type": String,
"img_url": String,
"price": Number,
"title": String,
"imgs": Array
})
// 使用模式“编译”模型
module.exports = mongoose.model('Goods', produtSchema)
const schema = new Schema(
{
name: String,
binary: Buffer,
living: Boolean,
updated: { type: Date, default: Date.now },
age: { type: Number, min: 18, max: 65, required: true },
mixed: Schema.Types.Mixed,
_someId: Schema.Types.ObjectId,
array: [],
ofString: [String], // 其他类型也可使用数组
nested: { stuff: { type: String, lowercase: true, trim: true } }
})没有基础的一定得看看：一篇文章带你入门Mongoose。 koa-router服务端的路由，定义各个接口的请求方式以及返回的数据。
全部评论
专题导读
上一篇：tide2046/studyFiles: 一些NodeJS和前端的学习笔记，Koa+MongoDB+MySQL+JavaScript+Bo ...发布时间：2022-06-24下一篇：mperovic/KOAProgressBar: Custom progress bar for iOS 5.0+发布时间：2022-06-24热门推荐
热门话题
 阅读排行榜
|
请发表评论