Merge branch 'chapter8' of github.com:Ewall1106/mall
ewall
7 years ago
commit
1c76f02eeb
@ -0,0 +1,41 @@
|
||||
var createError = require('http-errors');
|
||||
var express = require('express');
|
||||
var path = require('path');
|
||||
var cookieParser = require('cookie-parser');
|
||||
var logger = require('morgan');
|
||||
|
||||
var indexRouter = require('./routes/index');
|
||||
var usersRouter = require('./routes/users');
|
||||
|
||||
var app = express();
|
||||
|
||||
// view engine setup
|
||||
app.set('views', path.join(__dirname, 'views'));
|
||||
app.set('view engine', 'jade');
|
||||
|
||||
app.use(logger('dev'));
|
||||
app.use(express.json());
|
||||
app.use(express.urlencoded({ extended: false }));
|
||||
app.use(cookieParser());
|
||||
app.use(express.static(path.join(__dirname, 'public')));
|
||||
|
||||
app.use('/', indexRouter);
|
||||
app.use('/users', usersRouter);
|
||||
|
||||
// catch 404 and forward to error handler
|
||||
app.use(function(req, res, next) {
|
||||
next(createError(404));
|
||||
});
|
||||
|
||||
// error handler
|
||||
app.use(function(err, req, res, next) {
|
||||
// set locals, only providing error in development
|
||||
res.locals.message = err.message;
|
||||
res.locals.error = req.app.get('env') === 'development' ? err : {};
|
||||
|
||||
// render the error page
|
||||
res.status(err.status || 500);
|
||||
res.render('error');
|
||||
});
|
||||
|
||||
module.exports = app;
|
||||
@ -0,0 +1,90 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
/**
|
||||
* Module dependencies.
|
||||
*/
|
||||
|
||||
var app = require('../app');
|
||||
var debug = require('debug')('server:server');
|
||||
var http = require('http');
|
||||
|
||||
/**
|
||||
* Get port from environment and store in Express.
|
||||
*/
|
||||
|
||||
var port = normalizePort(process.env.PORT || '3000');
|
||||
app.set('port', port);
|
||||
|
||||
/**
|
||||
* Create HTTP server.
|
||||
*/
|
||||
|
||||
var server = http.createServer(app);
|
||||
|
||||
/**
|
||||
* Listen on provided port, on all network interfaces.
|
||||
*/
|
||||
|
||||
server.listen(port);
|
||||
server.on('error', onError);
|
||||
server.on('listening', onListening);
|
||||
|
||||
/**
|
||||
* Normalize a port into a number, string, or false.
|
||||
*/
|
||||
|
||||
function normalizePort(val) {
|
||||
var port = parseInt(val, 10);
|
||||
|
||||
if (isNaN(port)) {
|
||||
// named pipe
|
||||
return val;
|
||||
}
|
||||
|
||||
if (port >= 0) {
|
||||
// port number
|
||||
return port;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Event listener for HTTP server "error" event.
|
||||
*/
|
||||
|
||||
function onError(error) {
|
||||
if (error.syscall !== 'listen') {
|
||||
throw error;
|
||||
}
|
||||
|
||||
var bind = typeof port === 'string'
|
||||
? 'Pipe ' + port
|
||||
: 'Port ' + port;
|
||||
|
||||
// handle specific listen errors with friendly messages
|
||||
switch (error.code) {
|
||||
case 'EACCES':
|
||||
console.error(bind + ' requires elevated privileges');
|
||||
process.exit(1);
|
||||
break;
|
||||
case 'EADDRINUSE':
|
||||
console.error(bind + ' is already in use');
|
||||
process.exit(1);
|
||||
break;
|
||||
default:
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Event listener for HTTP server "listening" event.
|
||||
*/
|
||||
|
||||
function onListening() {
|
||||
var addr = server.address();
|
||||
var bind = typeof addr === 'string'
|
||||
? 'pipe ' + addr
|
||||
: 'port ' + addr.port;
|
||||
debug('Listening on ' + bind);
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "server",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "node ./bin/www"
|
||||
},
|
||||
"dependencies": {
|
||||
"cookie-parser": "~1.4.3",
|
||||
"debug": "~2.6.9",
|
||||
"express": "~4.16.0",
|
||||
"http-errors": "~1.6.2",
|
||||
"jade": "~1.11.0",
|
||||
"morgan": "~1.9.0"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
body {
|
||||
padding: 50px;
|
||||
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00B7FF;
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
var express = require('express');
|
||||
var router = express.Router();
|
||||
|
||||
/* GET home page. */
|
||||
router.get('/', function(req, res, next) {
|
||||
res.render('index', { title: 'Express' });
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@ -0,0 +1,9 @@
|
||||
var express = require('express');
|
||||
var router = express.Router();
|
||||
|
||||
/* GET users listing. */
|
||||
router.get('/', function(req, res, next) {
|
||||
res.send('respond with a resource');
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@ -0,0 +1,6 @@
|
||||
extends layout
|
||||
|
||||
block content
|
||||
h1= message
|
||||
h2= error.status
|
||||
pre #{error.stack}
|
||||
@ -0,0 +1,5 @@
|
||||
extends layout
|
||||
|
||||
block content
|
||||
h1= title
|
||||
p Welcome to #{title}
|
||||
@ -0,0 +1,7 @@
|
||||
doctype html
|
||||
html
|
||||
head
|
||||
title= title
|
||||
link(rel='stylesheet', href='/stylesheets/style.css')
|
||||
body
|
||||
block content
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 17 KiB |
@ -1,90 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<h2>Essential Links</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vuejs.org" target="_blank">
|
||||
Core Docs
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://forum.vuejs.org" target="_blank">
|
||||
Forum
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vuejs.org" target="_blank">
|
||||
Community Chat
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/vuejs" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
</li>
|
||||
<br>
|
||||
<li>
|
||||
<a href="http://vuejs-templates.github.io/webpack/" target="_blank">
|
||||
Docs for This Template
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Ecosystem</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://router.vuejs.org/" target="_blank">
|
||||
vue-router
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://vuex.vuejs.org/" target="_blank">
|
||||
vuex
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://vue-loader.vuejs.org/" target="_blank">
|
||||
vue-loader
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/vuejs/awesome-vue" target="_blank">
|
||||
awesome-vue
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "HelloWorld",
|
||||
data() {
|
||||
return {
|
||||
msg: "Welcome to Your Vue.js App"
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h1,
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div class="carousel">
|
||||
<swiper class="swiper_container" :options="swiperOption" ref="mySwiper">
|
||||
<!-- slides -->
|
||||
<swiper-slide class="swiper_item"><img src="../../static/carousel3.png" /></swiper-slide>
|
||||
<swiper-slide class="swiper_item"><img src="../../static/carousel1.png" /></swiper-slide>
|
||||
<swiper-slide class="swiper_item"><img src="../../static/carousel2.png" /></swiper-slide>
|
||||
<!-- Optional controls -->
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
<!-- <div class="swiper-button-prev" slot="button-prev"></div>
|
||||
<div class="swiper-button-next" slot="button-next"></div>
|
||||
<div class="swiper-scrollbar" slot="scrollbar"></div> -->
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import "swiper/dist/css/swiper.css";
|
||||
import { swiper, swiperSlide } from "vue-awesome-swiper";
|
||||
|
||||
export default {
|
||||
name: "carousel",
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
swiperOption: {
|
||||
// some swiper options/callbacks
|
||||
// 所有的参数同 swiper 官方 api 参数
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
dynamicBullets: true
|
||||
},
|
||||
// autoplay: {
|
||||
// delay: 2500,
|
||||
// disableOnInteraction: false
|
||||
// }
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
swiper() {
|
||||
return this.$refs.mySwiper.swiper;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// current swiper instance
|
||||
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
|
||||
console.log("this is current swiper instance object", this.swiper);
|
||||
this.swiper.slideTo(3, 1000, false);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.carousel {
|
||||
.swiper_container {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
.swiper_item {
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div class="myHeader">
|
||||
<img class="logo" src="@/assets/logo.png" />
|
||||
<h3 class="title">Hxx-Luxury Store</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "myHeader",
|
||||
data() {
|
||||
return {
|
||||
msg: "Welcome to Your Vue.js App"
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.myHeader {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
.logo {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.title {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,10 +0,0 @@
|
||||
<template>
|
||||
<div class="goods">
|
||||
This is goods:
|
||||
<span>{{$route.query.goodsId}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<my-header></my-header>
|
||||
<carousel></carousel>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import MyHeader from '@/components/myHeader'
|
||||
import Carousel from '@/components/carousel'
|
||||
export default {
|
||||
name: "home",
|
||||
components: {
|
||||
MyHeader,
|
||||
Carousel
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
msg: "hello vue"
|
||||
};
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<div class="test">
|
||||
<!-- 动态路由 -->
|
||||
This is id: {{$route.params.testId}}
|
||||
|
||||
<!-- 嵌套路由 -->
|
||||
<router-link to="/test/title1">标题1</router-link>
|
||||
<router-link to="/test/title2">标题2</router-link>
|
||||
<router-view></router-view>
|
||||
|
||||
<!-- 编程式路由 -->
|
||||
<div @click="gotoGoods">跳转到商品详情页面</div>
|
||||
|
||||
<!-- 命名路由 -->
|
||||
<router-link v-bind:to="{name: 'goods'}">用命名路由的方式跳转到商品详情页面</router-link>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'hello vue'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
gotoGoods() {
|
||||
//this.$router.push('/goods');
|
||||
|
||||
// this.$router.push({
|
||||
// path: '/goods?goodsId=666'
|
||||
// });
|
||||
|
||||
this.$router.push({
|
||||
path: '/goods',
|
||||
query: {
|
||||
goodsId: 666
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@ -1,11 +0,0 @@
|
||||
<template>
|
||||
<div class="title1">
|
||||
这里是title1的内容
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@ -1,11 +0,0 @@
|
||||
<template>
|
||||
<div class="title2">
|
||||
这里是title2的内容
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped></style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Loading…
Reference in New Issue