├── .babelrc
├── .editorconfig
├── .gitignore
├── .postcssrc.js
├── README.md
├── build
    ├── build.js
    ├── check-versions.js
    ├── dev-client.js
    ├── dev-server.js
    ├── utils.js
    ├── vue-loader.conf.js
    ├── webpack.base.conf.js
    ├── webpack.dev.conf.js
    └── webpack.prod.conf.js
├── config
    ├── dev.env.js
    ├── index.js
    └── prod.env.js
├── https
    ├── index.js
    ├── rootCA.pem
    ├── server.crt
    └── server.key
├── index.html
├── package.json
├── server
    ├── api
    │   ├── listmore.js
    │   └── userApi.js
    ├── db.js
    ├── index.js
    └── sqlMap.js
├── src
    ├── App.vue
    ├── assets
    │   ├── js
    │   │   └── cookie.js
    │   └── logo.png
    ├── components
    │   ├── Hello.vue
    │   ├── foot.vue
    │   ├── head.vue
    │   ├── login.vue
    │   ├── mine.vue
    │   ├── search.vue
    │   └── user.vue
    ├── main.js
    ├── router
    │   └── index.js
    └── vuex
    │   ├── actions.js
    │   ├── mutation-types.js
    │   ├── mutations.js
    │   └── store.js
└── static
    ├── .gitkeep
    ├── QQ截图20180529230333.png
    ├── QQ截图20180529230411.png
    ├── back-info.jpg
    ├── icon2.png
    ├── listmore.json
    └── theme.scss


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-runtime"],
12 |   "env": {
13 |     "test": {
14 |       "presets": ["env", "stage-2"],
15 |       "plugins": ["istanbul"]
16 |     }
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | *.suo
11 | *.ntvs*
12 | *.njsproj
13 | *.sln
14 | package-lock.json
15 | yarn.lock
16 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 | 
3 | module.exports = {
4 |   "plugins": {
5 |     // to edit target browsers: use "browserslist" field in package.json
6 |     "autoprefixer": {}
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ### vue入门级全栈项目 - 拉钩网H5版本
 2 | 这个项目是我在17年的时候创建的，vue都不知道更新多少版本了。
 3 | 
 4 | 但我还是推荐大家去体验下这个项目，项目不大不小刚刚好😊
 5 | 
 6 | 多踩踩坑，无论对SPA还是http都会有一个入门级的了解
 7 | 
 8 | <img src="https://github.com/1uokun/vue-node-mysql/blob/master/static/QQ%E6%88%AA%E5%9B%BE20180529230333.png" style="width:45%;float:left"/>
 9 | <img src="https://github.com/1uokun/vue-node-mysql/blob/master/static/QQ%E6%88%AA%E5%9B%BE20180529230411.png" style="width:45%;float:left"/>
10 | 
11 | ### 1.使用方法
12 | ```bash
13 | $ git clone https://github.com/1uokun/vue-node-mysql.git
14 | $ cd vue-node-mysql
15 | $ cnpm install              # 如果能翻墙则无需使用cnpm
16 | 
17 | // 开发
18 | $ npm start                     
19 | 
20 | // 等待编译完成,然后访问locahost:8080预览页面
21 | 
22 | // 启动express服务
23 | $ npm run server
24 | 
25 | // 这里将前后端分离，后段接口地址为 locahost:3000
26 | ```
27 | ### 2.HTTPS
28 | 这个项目新增https支持
29 | 
30 | **教程**： [如何在5分钟内让HTTPS在本地开发环境中运行](https://medium.freecodecamp.org/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec)
31 | 
32 | **具体代码**：[commit](https://github.com/1uokun/vue-node-mysql/commit/295c87f5d121f4c3d6dc4745878d1607ea332516)
33 | 
34 | **安装证书**：在文件路径*https/rootCA.pem*中双击该文件即可安装证书
35 | 
36 | ⚠**注意**：️如果不想使用https可以通过上述commit删除代码
37 | 
38 | ### 3.项目说明：
39 | 
40 |  本项目你将用到
41 |  ```
42 |  |-- 前端
43 |    |-- vue
44 |      |-- vue-router
45 |      |-- vuex
46 |    |-- axios
47 |    |-- sass
48 |  |-- 后端
49 |    |-- express
50 |    |-- mysql
51 |  |-- 其他
52 |    |-- cookie
53 |    |-- localstrong
54 |    |-- nodemon
55 |  ```
56 | 其中项目css使用sass预编译，如果不能翻墙，请使用淘宝镜像或yarn或者直接在GitHub中找。  <br/>
57 | `cnpm install node-sass sass-loader`    <br/>
58 | https://segmentfault.com/a/1190000011288053 <br/>
59 | 这篇文章介绍了后端功能细节  <br/>
60 | 
61 | ### 4.常见问题
62 | 
63 |  - 接口`404`
64 |  
65 |    express服务没有开启
66 |    ```bash
67 |    npm run server
68 |    ```
69 |    
70 |  - 接口`504`
71 |  
72 |    本地数据库没有创建，现在已为您添加自动创建数据库脚本
73 |    ```db
74 |    create database vue_node_mysql_learning
75 |    ```
76 |    另外数据库的初始密码可能不是123456，有些是12345678。
77 |    记得在`server/db.js`内修改
78 | 


--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
 1 | require('./check-versions')()
 2 | 
 3 | process.env.NODE_ENV = 'production'
 4 | 
 5 | var ora = require('ora')
 6 | var rm = require('rimraf')
 7 | var path = require('path')
 8 | var chalk = require('chalk')
 9 | var webpack = require('webpack')
10 | var config = require('../config')
11 | var webpackConfig = require('./webpack.prod.conf')
12 | 
13 | var spinner = ora('building for production...')
14 | spinner.start()
15 | 
16 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
17 |   if (err) throw err
18 |   webpack(webpackConfig, function (err, stats) {
19 |     spinner.stop()
20 |     if (err) throw err
21 |     process.stdout.write(stats.toString({
22 |       colors: true,
23 |       modules: false,
24 |       children: false,
25 |       chunks: false,
26 |       chunkModules: false
27 |     }) + '\n\n')
28 | 
29 |     if (stats.hasErrors()) {
30 |       console.log(chalk.red('  Build failed with errors.\n'))
31 |       process.exit(1)
32 |     }
33 | 
34 |     console.log(chalk.cyan('  Build complete.\n'))
35 |     console.log(chalk.yellow(
36 |       '  Tip: built files are meant to be served over an HTTP server.\n' +
37 |       '  Opening index.html over file:// won\'t work.\n'
38 |     ))
39 |   })
40 | })
41 | 


--------------------------------------------------------------------------------
/build/check-versions.js:
--------------------------------------------------------------------------------
 1 | var chalk = require('chalk')
 2 | var semver = require('semver')
 3 | var packageConfig = require('../package.json')
 4 | var shell = require('shelljs')
 5 | function exec (cmd) {
 6 |   return require('child_process').execSync(cmd).toString().trim()
 7 | }
 8 | 
 9 | var versionRequirements = [
10 |   {
11 |     name: 'node',
12 |     currentVersion: semver.clean(process.version),
13 |     versionRequirement: packageConfig.engines.node
14 |   }
15 | ]
16 | 
17 | if (shell.which('npm')) {
18 |   versionRequirements.push({
19 |     name: 'npm',
20 |     currentVersion: exec('npm --version'),
21 |     versionRequirement: packageConfig.engines.npm
22 |   })
23 | }
24 | 
25 | module.exports = function () {
26 |   var warnings = []
27 |   for (var i = 0; i < versionRequirements.length; i++) {
28 |     var mod = versionRequirements[i]
29 |     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
30 |       warnings.push(mod.name + ': ' +
31 |         chalk.red(mod.currentVersion) + ' should be ' +
32 |         chalk.green(mod.versionRequirement)
33 |       )
34 |     }
35 |   }
36 | 
37 |   if (warnings.length) {
38 |     console.log('')
39 |     console.log(chalk.yellow('To use this template, you must update following to modules:'))
40 |     console.log()
41 |     for (var i = 0; i < warnings.length; i++) {
42 |       var warning = warnings[i]
43 |       console.log('  ' + warning)
44 |     }
45 |     console.log()
46 |     process.exit(1)
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/build/dev-client.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | require('eventsource-polyfill')
 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
 4 | 
 5 | hotClient.subscribe(function (event) {
 6 |   if (event.action === 'reload') {
 7 |     window.location.reload()
 8 |   }
 9 | })
10 | 


--------------------------------------------------------------------------------
/build/dev-server.js:
--------------------------------------------------------------------------------
 1 | require('./check-versions')()
 2 | 
 3 | var config = require('../config')
 4 | if (!process.env.NODE_ENV) {
 5 |   process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
 6 | }
 7 | 
 8 | var opn = require('opn')
 9 | var path = require('path')
10 | var express = require('express')
11 | var webpack = require('webpack')
12 | var proxyMiddleware = require('http-proxy-middleware')
13 | var webpackConfig = require('./webpack.dev.conf')
14 | 
15 | // default port where dev server listens for incoming traffic
16 | var port = process.env.PORT || config.dev.port
17 | // automatically open browser, if not set will be false
18 | var autoOpenBrowser = !!config.dev.autoOpenBrowser
19 | // Define HTTP proxies to your custom API backend
20 | // https://github.com/chimurai/http-proxy-middleware
21 | var proxyTable = config.dev.proxyTable
22 | 
23 | var app = express()
24 | var compiler = webpack(webpackConfig)
25 | 
26 | var devMiddleware = require('webpack-dev-middleware')(compiler, {
27 |   publicPath: webpackConfig.output.publicPath,
28 |   quiet: true
29 | })
30 | 
31 | var hotMiddleware = require('webpack-hot-middleware')(compiler, {
32 |   log: false,
33 |   heartbeat: 2000
34 | })
35 | // force page reload when html-webpack-plugin template changes
36 | compiler.plugin('compilation', function (compilation) {
37 |   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
38 |     hotMiddleware.publish({ action: 'reload' })
39 |     cb()
40 |   })
41 | })
42 | 
43 | // proxy api requests
44 | Object.keys(proxyTable).forEach(function (context) {
45 |   var options = proxyTable[context]
46 |   if (typeof options === 'string') {
47 |     options = { target: options }
48 |   }
49 |   app.use(proxyMiddleware(options.filter || context, options))
50 | })
51 | 
52 | // handle fallback for HTML5 history API
53 | app.use(require('connect-history-api-fallback')())
54 | 
55 | // serve webpack bundle output
56 | app.use(devMiddleware)
57 | 
58 | // enable hot-reload and state-preserving
59 | // compilation error display
60 | app.use(hotMiddleware)
61 | 
62 | // serve pure static assets
63 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
64 | app.use(staticPath, express.static('./static'))
65 | 
66 | var uri = 'https://localhost:' + port
67 | 
68 | var _resolve
69 | var readyPromise = new Promise(resolve => {
70 |   _resolve = resolve
71 | })
72 | 
73 | console.log('> Starting dev server...')
74 | devMiddleware.waitUntilValid(() => {
75 |   console.log('> Listening at ' + uri + '\n')
76 |   // when env is testing, don't need open it
77 |   if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
78 |     opn(uri)
79 |   }
80 |   _resolve()
81 | })
82 | 
83 | // var server = app.listen(port)
84 | 
85 | //添加https环境
86 | const certOptions = require('../https')
87 | const https = require('https');
88 | https.createServer(certOptions, app).listen(port);
89 | 
90 | 
91 | module.exports = {
92 |   ready: readyPromise,
93 |   close: () => {
94 |     server.close()
95 |   }
96 | }
97 | 


--------------------------------------------------------------------------------
/build/utils.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var config = require('../config')
 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin')
 4 | 
 5 | exports.assetsPath = function (_path) {
 6 |   var assetsSubDirectory = process.env.NODE_ENV === 'production'
 7 |     ? config.build.assetsSubDirectory
 8 |     : config.dev.assetsSubDirectory
 9 |   return path.posix.join(assetsSubDirectory, _path)
10 | }
11 | 
12 | exports.cssLoaders = function (options) {
13 |   options = options || {}
14 | 
15 |   var cssLoader = {
16 |     loader: 'css-loader',
17 |     options: {
18 |       minimize: process.env.NODE_ENV === 'production',
19 |       sourceMap: options.sourceMap
20 |     }
21 |   }
22 | 
23 |   // generate loader string to be used with extract text plugin
24 |   function generateLoaders (loader, loaderOptions) {
25 |     var loaders = [cssLoader]
26 |     if (loader) {
27 |       loaders.push({
28 |         loader: loader + '-loader',
29 |         options: Object.assign({}, loaderOptions, {
30 |           sourceMap: options.sourceMap
31 |         })
32 |       })
33 |     }
34 | 
35 |     // Extract CSS when that option is specified
36 |     // (which is the case during production build)
37 |     if (options.extract) {
38 |       return ExtractTextPlugin.extract({
39 |         use: loaders,
40 |         fallback: 'vue-style-loader'
41 |       })
42 |     } else {
43 |       return ['vue-style-loader'].concat(loaders)
44 |     }
45 |   }
46 | 
47 |   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
48 |   return {
49 |     css: generateLoaders(),
50 |     postcss: generateLoaders(),
51 |     less: generateLoaders('less'),
52 |     sass: generateLoaders('sass', { indentedSyntax: true }),
53 |     scss: generateLoaders('sass'),
54 |     stylus: generateLoaders('stylus'),
55 |     styl: generateLoaders('stylus')
56 |   }
57 | }
58 | 
59 | // Generate loaders for standalone style files (outside of .vue)
60 | exports.styleLoaders = function (options) {
61 |   var output = []
62 |   var loaders = exports.cssLoaders(options)
63 |   for (var extension in loaders) {
64 |     var loader = loaders[extension]
65 |     output.push({
66 |       test: new RegExp('\\.' + extension + '$'),
67 |       use: loader
68 |     })
69 |   }
70 |   return output
71 | }
72 | 


--------------------------------------------------------------------------------
/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
 1 | var utils = require('./utils')
 2 | var config = require('../config')
 3 | var isProduction = process.env.NODE_ENV === 'production'
 4 | 
 5 | module.exports = {
 6 |   loaders: utils.cssLoaders({
 7 |     sourceMap: isProduction
 8 |       ? config.build.productionSourceMap
 9 |       : config.dev.cssSourceMap,
10 |     extract: isProduction
11 |   }),
12 |   transformToRequire: {
13 |     video: 'src',
14 |     source: 'src',
15 |     img: 'src',
16 |     image: 'xlink:href'
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var utils = require('./utils')
 3 | var config = require('../config')
 4 | var vueLoaderConfig = require('./vue-loader.conf')
 5 | 
 6 | function resolve (dir) {
 7 |   return path.join(__dirname, '..', dir)
 8 | }
 9 | 
10 | module.exports = {
11 |   entry: {
12 |     app: './src/main.js'
13 |   },
14 |   output: {
15 |     path: config.build.assetsRoot,
16 |     filename: '[name].js',
17 |     publicPath: process.env.NODE_ENV === 'production'
18 |       ? config.build.assetsPublicPath
19 |       : config.dev.assetsPublicPath
20 |   },
21 |   resolve: {
22 |     extensions: ['.js', '.vue', '.json'],
23 |     alias: {
24 |       'vue$': 'vue/dist/vue.esm.js',
25 |       '@': resolve('src'),
26 |     }
27 |   },
28 |   module: {
29 |     rules: [
30 |       {
31 |         test: /\.vue$/,
32 |         loader: 'vue-loader',
33 |         options: vueLoaderConfig
34 |       },
35 |       {
36 |         test: /\.js$/,
37 |         loader: 'babel-loader',
38 |         include: [resolve('src'), resolve('test')]
39 |       },
40 |       {
41 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
42 |         loader: 'url-loader',
43 |         options: {
44 |           limit: 10000,
45 |           name: utils.assetsPath('img/[name].[hash:7].[ext]')
46 |         }
47 |       },
48 |       {
49 |         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
50 |         loader: 'url-loader',
51 |         options: {
52 |           limit: 10000,
53 |           name: utils.assetsPath('media/[name].[hash:7].[ext]')
54 |         }
55 |       },
56 |       {
57 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
58 |         loader: 'url-loader',
59 |         options: {
60 |           limit: 10000,
61 |           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
62 |         }
63 |       }
64 |     ]
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
 1 | var utils = require('./utils')
 2 | var webpack = require('webpack')
 3 | var config = require('../config')
 4 | var merge = require('webpack-merge')
 5 | var baseWebpackConfig = require('./webpack.base.conf')
 6 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 7 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 8 | 
 9 | // add hot-reload related code to entry chunks
10 | Object.keys(baseWebpackConfig.entry).forEach(function (name) {
11 |   baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
12 | })
13 | 
14 | module.exports = merge(baseWebpackConfig, {
15 |   module: {
16 |     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
17 |   },
18 |   // cheap-module-eval-source-map is faster for development
19 |   devtool: '#cheap-module-eval-source-map',
20 |   plugins: [
21 |     new webpack.DefinePlugin({
22 |       'process.env': config.dev.env
23 |     }),
24 |     // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
25 |     new webpack.HotModuleReplacementPlugin(),
26 |     new webpack.NoEmitOnErrorsPlugin(),
27 |     // https://github.com/ampedandwired/html-webpack-plugin
28 |     new HtmlWebpackPlugin({
29 |       filename: 'index.html',
30 |       template: 'index.html',
31 |       inject: true
32 |     }),
33 |     new FriendlyErrorsPlugin()
34 |   ]
35 | })
36 | 


--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
  1 | var path = require('path')
  2 | var utils = require('./utils')
  3 | var webpack = require('webpack')
  4 | var config = require('../config')
  5 | var merge = require('webpack-merge')
  6 | var baseWebpackConfig = require('./webpack.base.conf')
  7 | var CopyWebpackPlugin = require('copy-webpack-plugin')
  8 | var HtmlWebpackPlugin = require('html-webpack-plugin')
  9 | var ExtractTextPlugin = require('extract-text-webpack-plugin')
 10 | var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 11 | 
 12 | var env = config.build.env
 13 | 
 14 | var webpackConfig = merge(baseWebpackConfig, {
 15 |   module: {
 16 |     rules: utils.styleLoaders({
 17 |       sourceMap: config.build.productionSourceMap,
 18 |       extract: true
 19 |     })
 20 |   },
 21 |   devtool: config.build.productionSourceMap ? '#source-map' : false,
 22 |   output: {
 23 |     path: config.build.assetsRoot,
 24 |     filename: utils.assetsPath('js/[name].[chunkhash].js'),
 25 |     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 26 |   },
 27 |   plugins: [
 28 |     // http://vuejs.github.io/vue-loader/en/workflow/production.html
 29 |     new webpack.DefinePlugin({
 30 |       'process.env': env
 31 |     }),
 32 |     new webpack.optimize.UglifyJsPlugin({
 33 |       compress: {
 34 |         warnings: false
 35 |       },
 36 |       sourceMap: true
 37 |     }),
 38 |     // extract css into its own file
 39 |     new ExtractTextPlugin({
 40 |       filename: utils.assetsPath('css/[name].[contenthash].css')
 41 |     }),
 42 |     // Compress extracted CSS. We are using this plugin so that possible
 43 |     // duplicated CSS from different components can be deduped.
 44 |     new OptimizeCSSPlugin({
 45 |       cssProcessorOptions: {
 46 |         safe: true
 47 |       }
 48 |     }),
 49 |     // generate dist index.html with correct asset hash for caching.
 50 |     // you can customize output by editing /index.html
 51 |     // see https://github.com/ampedandwired/html-webpack-plugin
 52 |     new HtmlWebpackPlugin({
 53 |       filename: config.build.index,
 54 |       template: 'index.html',
 55 |       inject: true,
 56 |       minify: {
 57 |         removeComments: true,
 58 |         collapseWhitespace: true,
 59 |         removeAttributeQuotes: true
 60 |         // more options:
 61 |         // https://github.com/kangax/html-minifier#options-quick-reference
 62 |       },
 63 |       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 64 |       chunksSortMode: 'dependency'
 65 |     }),
 66 |     // keep module.id stable when vender modules does not change
 67 |     new webpack.HashedModuleIdsPlugin(),
 68 |     // split vendor js into its own file
 69 |     new webpack.optimize.CommonsChunkPlugin({
 70 |       name: 'vendor',
 71 |       minChunks: function (module, count) {
 72 |         // any required modules inside node_modules are extracted to vendor
 73 |         return (
 74 |           module.resource &&
 75 |           /\.js$/.test(module.resource) &&
 76 |           module.resource.indexOf(
 77 |             path.join(__dirname, '../node_modules')
 78 |           ) === 0
 79 |         )
 80 |       }
 81 |     }),
 82 |     // extract webpack runtime and module manifest to its own file in order to
 83 |     // prevent vendor hash from being updated whenever app bundle is updated
 84 |     new webpack.optimize.CommonsChunkPlugin({
 85 |       name: 'manifest',
 86 |       chunks: ['vendor']
 87 |     }),
 88 |     // copy custom static assets
 89 |     new CopyWebpackPlugin([
 90 |       {
 91 |         from: path.resolve(__dirname, '../static'),
 92 |         to: config.build.assetsSubDirectory,
 93 |         ignore: ['.*']
 94 |       }
 95 |     ])
 96 |   ]
 97 | })
 98 | 
 99 | if (config.build.productionGzip) {
100 |   var CompressionWebpackPlugin = require('compression-webpack-plugin')
101 | 
102 |   webpackConfig.plugins.push(
103 |     new CompressionWebpackPlugin({
104 |       asset: '[path].gz[query]',
105 |       algorithm: 'gzip',
106 |       test: new RegExp(
107 |         '\\.(' +
108 |         config.build.productionGzipExtensions.join('|') +
109 |         ')$'
110 |       ),
111 |       threshold: 10240,
112 |       minRatio: 0.8
113 |     })
114 |   )
115 | }
116 | 
117 | if (config.build.bundleAnalyzerReport) {
118 |   var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
119 |   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
120 | }
121 | 
122 | module.exports = webpackConfig
123 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var prodEnv = require('./prod.env')
3 | 
4 | module.exports = merge(prodEnv, {
5 |   NODE_ENV: '"development"'
6 | })
7 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | // see http://vuejs-templates.github.io/webpack for documentation.
 2 | var path = require('path')
 3 | 
 4 | module.exports = {
 5 |   build: {
 6 |     env: require('./prod.env'),
 7 |     index: path.resolve(__dirname, '../dist/index.html'),
 8 |     assetsRoot: path.resolve(__dirname, '../dist'),
 9 |     assetsSubDirectory: 'static',
10 |     assetsPublicPath: '/',
11 |     productionSourceMap: true,
12 |     // Gzip off by default as many popular static hosts such as
13 |     // Surge or Netlify already gzip all static assets for you.
14 |     // Before setting to `true`, make sure to:
15 |     // npm install --save-dev compression-webpack-plugin
16 |     productionGzip: false,
17 |     productionGzipExtensions: ['js', 'css'],
18 |     // Run the build command with an extra argument to
19 |     // View the bundle analyzer report after build finishes:
20 |     // `npm run build --report`
21 |     // Set to `true` or `false` to always turn it on or off
22 |     bundleAnalyzerReport: process.env.npm_config_report
23 |   },
24 |   dev: {
25 |     env: require('./dev.env'),
26 |     port: 8080,
27 |     autoOpenBrowser: true,
28 |     assetsSubDirectory: 'static',
29 |     assetsPublicPath: '/',
30 |     proxyTable: {
31 |         '/api': {
32 |             target: 'https://localhost:3000',
33 |             secure: false,
34 |             changeOrigin: true,
35 |             pathRewrite: {
36 | 
37 |                 '^/api': '/api/'
38 |             }
39 |         }
40 |     },
41 |     // CSS Sourcemaps off by default because relative paths are "buggy"
42 |     // with this option, according to the CSS-Loader README
43 |     // (https://github.com/webpack/css-loader#sourcemaps)
44 |     // In our experience, they generally work as expected,
45 |     // just be aware of this issue when enabling this option.
46 |     cssSourceMap: false
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   NODE_ENV: '"production"'
3 | }
4 | 


--------------------------------------------------------------------------------
/https/index.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs');
 2 | const path = require('path');
 3 | 
 4 | const certOptions = {
 5 |   key: fs.readFileSync(path.resolve('./https/server.key')),
 6 |   cert: fs.readFileSync(path.resolve('./https/server.crt'))
 7 | }
 8 | 
 9 | module.exports = certOptions
10 | 


--------------------------------------------------------------------------------
/https/rootCA.pem:
--------------------------------------------------------------------------------
 1 | -----BEGIN CERTIFICATE-----
 2 | MIICtDCCAZwCCQDWk/vhKyvxpzANBgkqhkiG9w0BAQsFADAcMRowGAYDVQQDDBFM
 3 | b2NhbCBDZXJ0aWZpY2F0ZTAeFw0xODEwMDgwMzQ1NTdaFw0yMTA3MjgwMzQ1NTda
 4 | MBwxGjAYBgNVBAMMEUxvY2FsIENlcnRpZmljYXRlMIIBIjANBgkqhkiG9w0BAQEF
 5 | AAOCAQ8AMIIBCgKCAQEAuosxsk7vfqDUJS2mWduN+1LVu4uE0jV/N48I4rPQwL6s
 6 | VcrewqPdFnvz8gE/D7/Bf6SjTpKrGnbOhWsn8JV1trQ5Mpcch/s1ZoJc9j7GL3bw
 7 | EHo79utKflKHvcJHvjTBAm4M30Uze/LUS+v/OrDFlI2uv032uPpm5aGAEeUJxb5n
 8 | 9qpnpP3zINpjyRJTPrm27o+U8eO+MEqQuAwEJ2bjmNUMCN+XCoGVQeyLSXoYGxUf
 9 | kNbdCOhKgdRGph9p1tYOkMiPH7D+H7BLKsptrpuaN+E2SfJUHcopNiQiwzwaQXdS
10 | sp6l9xVMCm/2XkxxUNpHyuWQSQX3MyRIyWsmjfiX1QIDAQABMA0GCSqGSIb3DQEB
11 | CwUAA4IBAQAa+EtTh/o1DlpNIRMpQ5SmS2wKXrMNHKhmdHDNvXEHrxDRdpcP51rk
12 | NpKPDN8KjSnX+iHMi+KbJ1QB1sIx3o4Hi+JCih9X1FgcOJr1RV5qL5+qEaKP+kKv
13 | XxBehBgfPA9XywsZ4YTiTpGUiUbuHz34XRAP0hbWAk73SRhik0EyfCiJN15KQ6US
14 | GTqz+SqgNOsQ384ScTe+AuoJnQpSVquMSZ8sNNRPTEP6KQa1cjg1SB1DLrEiVDvG
15 | Ioo605Ot5xhmAoaJFeDkv10OnVM3ce+x43NrTo2b9lRJTxKltRiYv1C3Yu/lWHLi
16 | o+4dugUExun3nskOd6N4zK6D+ZTqKo4N
17 | -----END CERTIFICATE-----
18 | 


--------------------------------------------------------------------------------
/https/server.crt:
--------------------------------------------------------------------------------
 1 | -----BEGIN CERTIFICATE-----
 2 | MIIDtDCCApygAwIBAgIJAMcuu8m1HWjLMA0GCSqGSIb3DQEBCwUAMBwxGjAYBgNV
 3 | BAMMEUxvY2FsIENlcnRpZmljYXRlMB4XDTE4MTAwODA1NDM0MloXDTIwMDIyMDA1
 4 | NDM0MlowgawxCzAJBgNVBAYTAlVTMRQwEgYDVQQIDAtSYW5kb21TdGF0ZTETMBEG
 5 | A1UEBwwKUmFuZG9tQ2l0eTEbMBkGA1UECgwSUmFuZG9tT3JnYW5pemF0aW9uMR8w
 6 | HQYDVQQLDBZSYW5kb21Pcmdhbml6YXRpb25Vbml0MSAwHgYJKoZIhvcNAQkBFhEx
 7 | NDk4NzEwMDM3QHFxLmNvbTESMBAGA1UEAwwJbG9jYWxob3N0MIIBIjANBgkqhkiG
 8 | 9w0BAQEFAAOCAQ8AMIIBCgKCAQEAwdpBgznfkXeB75Li0A5Ij4IS94QxNOVjge7P
 9 | kbFdnEz1e5eCtc+ZIX/xnWpshOMNqa6WUYQc5QE0qd3MA93JM26UnDVnnyzZyRkh
10 | Zk0rCDqPhjk6ixq52RbDWwo9j426NYuOg/mxYv1glLK0+BxMfXIIh43ZUdIUDhkf
11 | RRHIwdJoXqDWvUrHgXfemaV05XAPbY1mxiW3vxW/fxc06SbKjlcxk/FohfQ9Lkh7
12 | 0QlqH/mIZAj0IpodmX2HLCMlOBYIMiJfiC1wZCTCM9R/CVhO6T+88VVJfC5z1rg6
13 | lQgQGJzf9zi08xrcY8fd7qBCa3CjPj5JmpWbgRoQgc1aIL0nLwIDAQABo2gwZjA2
14 | BgNVHSMELzAtoSCkHjAcMRowGAYDVQQDDBFMb2NhbCBDZXJ0aWZpY2F0ZYIJANaT
15 | ++ErK/GnMAkGA1UdEwQCMAAwCwYDVR0PBAQDAgTwMBQGA1UdEQQNMAuCCWxvY2Fs
16 | aG9zdDANBgkqhkiG9w0BAQsFAAOCAQEAekL0jWYN1oxFbAKb60VAoCHNQHGcpe/n
17 | 4fkzwTyOpA8lcnHk9yMPG+pLKxbWH4YZWhweqAPDM687FHtpxHouPXP5F7VCsmXy
18 | yyUp41EPI3X5qB7IoYKlyojNjyZDug1X9mrbTmDcpOCSpl15DbzULYLOUge+Nt/P
19 | LgcGkpeC3tnsGvR7OkD7ROv26Rtvla1kI48jWahJwrje9L0CvJK4KSRD55COE7TQ
20 | Qic4ifM6Hly4LfSJ2WHAKB0gDKoxIaKPaDDrCeDSDUZeeUT+HapigKJL68MPDG/3
21 | VWMuB4nY88gT2s/AaiAUIg/bEicaEKWMKshFPIVdBbCYR3CLOTb5Gw==
22 | -----END CERTIFICATE-----
23 | 


--------------------------------------------------------------------------------
/https/server.key:
--------------------------------------------------------------------------------
 1 | -----BEGIN PRIVATE KEY-----
 2 | MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDB2kGDOd+Rd4Hv
 3 | kuLQDkiPghL3hDE05WOB7s+RsV2cTPV7l4K1z5khf/GdamyE4w2prpZRhBzlATSp
 4 | 3cwD3ckzbpScNWefLNnJGSFmTSsIOo+GOTqLGrnZFsNbCj2Pjbo1i46D+bFi/WCU
 5 | srT4HEx9cgiHjdlR0hQOGR9FEcjB0mheoNa9SseBd96ZpXTlcA9tjWbGJbe/Fb9/
 6 | FzTpJsqOVzGT8WiF9D0uSHvRCWof+YhkCPQimh2ZfYcsIyU4FggyIl+ILXBkJMIz
 7 | 1H8JWE7pP7zxVUl8LnPWuDqVCBAYnN/3OLTzGtxjx93uoEJrcKM+PkmalZuBGhCB
 8 | zVogvScvAgMBAAECggEAJhnQwIsSbxPvHPhgzgXQqywksDNyPHRNj48xivAydvMF
 9 | WMpZrYRlE5mDEq6FL8U0vUIMV29BAp2vDSgD3kqsLgiw+tbgS//TulvPHb1TFOX1
10 | qar737VcC9gWg4FKwjlX/Qg19aiQ/eTRI8jQGufs/Mb5+DKgIR3KRU8Yv0mUjMuH
11 | RSdarkeJf9/si//rVgN8yaRHUYsFToorh8DjGymW4hSuwyzqNzoCTaRNtXBpOmcT
12 | V91aK1clG3v7PuQtaEBFCeJiBrUc/mAR0WAsN7sQCRDvQTzmTNtuVAho5vHnmVAF
13 | ZuTB97pl+Uc4WBVtzV2FBLpJ2tBPCrK7hVJJaaFCyQKBgQDyxOJJf3uh3N38d8sI
14 | b3eYH6OwTGNW/Z/drPd+eA/xTl6dSupPls7Ez6erFvPPGzeVFbZLvHZ4IGC0Xwya
15 | v1sxm270sBTrhVtIag2wUHtGw63aw8+UO/fTXqBcRIW0PxpPWEsy69nS7C3Kr6Az
16 | ZKTlfInfqz5n83gP3OoVvz+LpQKBgQDMauNr9ZoMJ/EGAbopP1wUY0GtTBn3eIM3
17 | YYIXyOZQmekZrxachMZmtVjnRPaRj+k1Auf9+8k1sBpTHJiw+ra38IYlSFKjIQbN
18 | xJHZy0LpayuGWv3RMucqfIfIEXO9jAw9SjNjc71+z6QPPs5V7Anrir8TH0s9bjxr
19 | w+Ah3GY/QwKBgF0iNwWnSJDCIM9YTaXAzYqoqK1bwMiAqDHsx03XVZZnUFjbgqRh
20 | 4JUUbOhv97y+XkZte+/2LyTKlw7bYASF4MBZNuncG0p3cJuJRBMd7Q0qyKmicSIX
21 | F24ZYT/Ecd7CTp+d6ctxO7F1NeQKGFVfCPuZGXObSGesuaSsRYluQzyZAoGBALy3
22 | RUOK1u+4BAxulcW0p7Zut9hcNHDBwinjjC2XHAF3RbqfaLmQ3nU9oFjJ0vQpLrvw
23 | 9eoFhAlbjcIC2XgxzXPcyosqzJerStO2UIwH2bsSZHlCEacLXlxb4SKz8e0gmMAQ
24 | e4ap+FxVJ3mnmue55KKeUa4+qsCIv6EhkQ7RoVdvAoGBANdqEIBujywMp3E71vLi
25 | PH4XIWSkYWiiq42CwD1GPfUhqzp3ikhSrUVHkaBdvcU0PUsU+sSqko5PcYFjpDQp
26 | Z6HmU5ve+SHmLSO4WRgfXKAewagt06m5IutLikWb5yrFCTrcMy9+4Filkx5Bsv1T
27 | 4EQv6NFv5VXfRUHnaVtSaLHE
28 | -----END PRIVATE KEY-----
29 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>lagi</title>
 6 |   </head>
 7 |   <body>
 8 |     <div id="app"></div>
 9 |     <!-- built files will be auto injected -->
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "lagou",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "linux": "nodejs build/dev-server.js",
 9 |     "start": "node build/dev-server.js",
10 |     "build": "node build/build.js",
11 |     "server": "nodemon server/index.js"
12 |   },
13 |   "dependencies": {
14 |     "cookie-parser": "^1.4.3",
15 |     "nodemon": "1.18.3",
16 |     "vue": "2.4.2",
17 |     "vue-router": "2.7.0"
18 |   },
19 |   "devDependencies": {
20 |     "autoprefixer": "7.1.2",
21 |     "axios": "0.16.2",
22 |     "babel-core": "6.22.1",
23 |     "babel-loader": "7.1.1",
24 |     "babel-plugin-transform-runtime": "6.22.0",
25 |     "babel-preset-env": "1.3.2",
26 |     "babel-preset-stage-2": "6.22.0",
27 |     "babel-register": "6.22.0",
28 |     "body-parser": "1.18.1",
29 |     "chalk": "2.0.1",
30 |     "connect-history-api-fallback": "1.3.0",
31 |     "copy-webpack-plugin": "4.0.1",
32 |     "css-loader": "0.28.0",
33 |     "cssnano": "3.10.0",
34 |     "eventsource-polyfill": "0.9.6",
35 |     "express": "4.14.1",
36 |     "extract-text-webpack-plugin": "2.0.0",
37 |     "file-loader": "0.11.1",
38 |     "friendly-errors-webpack-plugin": "1.1.3",
39 |     "html-webpack-plugin": "2.28.0",
40 |     "http-proxy-middleware": "0.17.3",
41 |     "mysql": "2.14.1",
42 |     "node-sass": "4.5.3",
43 |     "opn": "5.1.0",
44 |     "optimize-css-assets-webpack-plugin": "2.0.0",
45 |     "ora": "1.2.0",
46 |     "rimraf": "2.6.0",
47 |     "sass-loader": "6.0.6",
48 |     "semver": "5.3.0",
49 |     "shelljs": "0.7.6",
50 |     "url-loader": "0.5.8",
51 |     "vue-loader": "13.0.4",
52 |     "vue-style-loader": "3.0.1",
53 |     "vue-template-compiler": "2.4.2",
54 |     "vuex": "2.4.0",
55 |     "webpack": "2.6.1",
56 |     "webpack-bundle-analyzer": "2.2.1",
57 |     "webpack-dev-middleware": "1.10.0",
58 |     "webpack-hot-middleware": "2.18.0",
59 |     "webpack-merge": "4.1.0"
60 |   },
61 |   "engines": {
62 |     "node": ">= 4.0.0",
63 |     "npm": ">= 3.0.0"
64 |   },
65 |   "browserslist": [
66 |     "> 1%",
67 |     "last 2 versions",
68 |     "not ie <= 8"
69 |   ]
70 | }
71 | 


--------------------------------------------------------------------------------
/server/api/listmore.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var router = express.Router();
 3 | var https = require('https');
 4 | 
 5 | 
 6 | //中间件
 7 | var jsonWrite = function(res, ret) {
 8 |   if(typeof ret === 'undefined') {
 9 |     res.send('err')
10 |   } else {
11 |     res.send(ret)
12 |   }
13 | };
14 | // hello页面列表数据
15 | router.get('/more', (req, res) => {
16 |   var request =  https.request({
17 |     hostname:'m.lagou.com',
18 |     port:'443',
19 |     path:'/listmore.json?'+req._parsedUrl.query,
20 |     method:'GET'
21 |   },(resp)=>{
22 |     let results = '';
23 |     //监听接受数据
24 |     resp.on('data',(dataObj)=>{
25 |       results += dataObj;
26 |     })
27 |     //监听关闭
28 |     resp.on('end',()=>{
29 |       jsonWrite(res, results)
30 |     })
31 |   })
32 |   // 发送请求
33 |   request.end();
34 | 
35 | });
36 | 
37 | module.exports = router;
38 | 


--------------------------------------------------------------------------------
/server/api/userApi.js:
--------------------------------------------------------------------------------
 1 | var models = require('../db');
 2 | var express = require('express');
 3 | var router = express.Router();
 4 | var mysql = require('mysql');
 5 | var $sql = require('../sqlMap');
 6 | // 连接数据库
 7 | var conn = mysql.createConnection(models.mysql);
 8 | conn.connect();
 9 | 
10 | //中间件
11 | var jsonWrite = function(res, ret) {
12 | 	if(typeof ret === 'undefined') {
13 | 		res.send('err')
14 | 	} else {
15 | 		res.json(ret);
16 | 		// res.send('ok')
17 | 	}
18 | };
19 | // 增加用户接口
20 | router.post('/addUser', (req, res) => {
21 | 	var sql_name = $sql.user.select_name
22 | 	var sql = $sql.user.add;
23 | 	var params = req.body;
24 | 	console.log(params);
25 | 	conn.query(sql_name,params.username,function(err,result) {
26 | 		if(err) {
27 | 			console.log(err)
28 | 		}
29 | 		if(result[0]===undefined) {
30 | 			conn.query(sql,[params.username,params.password], function(err, result) {
31 | 				if(err) {
32 | 					console.log(err)
33 | 				}
34 | 				if(result) {
35 | 					jsonWrite(res, result)
36 | 				}
37 | 			})
38 | 		}else {
39 | 			res.send('-1')
40 | 		}
41 | 	})
42 | 
43 | });
44 | 
45 | //查找用户接口
46 | router.post('/selectUser', (req,res) => {
47 | 	var sql_name = $sql.user.select_name;
48 | 	var sql_password = $sql.user.select_password;
49 | 	var params = req.body;
50 | 	conn.query(sql_name,params.username,function(err, result) {
51 | 		if(err) {
52 | 			console.log(err)
53 | 		}
54 | 		if(result[0]===undefined) {
55 | 			res.send('-1')
56 | 		}else {
57 | 			conn.query(sql_password,params.password, function(err, result) {
58 | 				if(err) {
59 | 					console.log(err)
60 | 				}
61 | 				if(result[0]===undefined) {
62 | 					res.send('0')
63 | 				}else {
64 | 				  // Set-Cookie
65 |           // 如果是https环境必须添加 { secure: true }
66 | 				  res.cookie('isAuth', 1, {maxAge: 7 * 24 * 60 * 1000, secure: true, signed: true});
67 | 					jsonWrite(res, result);
68 | 				}
69 | 			})
70 | 		}
71 | 	})
72 | });
73 | 
74 | //修改密码 目前未提供页面，可以用接口测试工具测试
75 | router.put('/updateUser', (req,res) => {
76 |   var sql_update = $sql.user.update_password;
77 |   var params = req.body;
78 |   if(req.cookies.isAuth){
79 |     conn.query(sql_update,[params.password,params.id], function(err, result) {
80 |       if(err) {
81 |         console.log(err)
82 |       }
83 |       if(result[0]===undefined) {
84 |         res.send('0')
85 |       }else {
86 |         jsonWrite(res, result);
87 |       }
88 |     })
89 |   }else {
90 |     res.send('no auth')
91 |   }
92 | });
93 | 
94 | module.exports = router;
95 | 


--------------------------------------------------------------------------------
/server/db.js:
--------------------------------------------------------------------------------
 1 | var MySQL = require('mysql');
 2 | var $sql = require('./sqlMap');
 3 | 
 4 | //数据库连接配置
 5 | var create_mysql={host:'localhost', user:'root', password:'123456',};
 6 | var mysql = {...create_mysql, database:'vue_node_mysql_learning', port: '3306'};
 7 | 
 8 | process.on('uncaughtException', function(err){
 9 |   // 如果数据库vue_node_mysql_learning不存在时，创建数据库
10 |   if(err.errno === 1049){
11 |     var conn = MySQL.createConnection(create_mysql);
12 |     MySQL.createConnection(mysql).query($sql.base.create,function(err, result){
13 |       console.error('创建数据库',err,result);
14 |       conn.query($sql.user.create_user,'',function(err, result){
15 |         if(!err){
16 |           conn.query($sql.user.add,["admin","123456"], function(err, result){
17 |           })
18 |         }
19 |       });
20 | 
21 |     })
22 | 
23 | 
24 |   }
25 | });
26 | 
27 | module.exports = {
28 |   mysql
29 | };
30 | 


--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
 1 | // node 后端服务器
 2 | const userApi = require('./api/userApi');
 3 | const listApi = require('./api/listmore');
 4 | 
 5 | const bodyParser = require('body-parser');
 6 | const cookieParser = require('cookie-parser');
 7 | const express = require('express');
 8 | const app = express();
 9 | app.use(bodyParser.json());
10 | app.use(bodyParser.urlencoded({extended: false}));
11 | app.use(cookieParser("secret_password"));
12 | 
13 | //cookie验证
14 | app.use(function (req, res, next) {
15 |   console.log("多个cookies",req.cookies); //Cookie: name1=value1; name2=value2
16 |   console.log("单个cookie",req.cookie);  //Cookie: name=value
17 |   console.log("加密后的cookie",req.signedCookies);
18 |   if(req.signedCookies.isAuth === "1"){
19 |     // 验证拦截
20 |   }
21 |   return next();
22 | });
23 | 
24 | // 后端api路由
25 | app.use('/api/user', userApi);
26 | app.use('/api/list', listApi);
27 | // 监听端口
28 | // app.listen(3000);
29 | // 添加https环境
30 | const certOptions = require('../https')
31 | const https = require('https');
32 | https.createServer(certOptions, app).listen(3000);
33 | 
34 | 
35 | console.log('success listen at port:3000......');
36 | 


--------------------------------------------------------------------------------
/server/sqlMap.js:
--------------------------------------------------------------------------------
 1 | // sql语句
 2 | var sqlMap = {
 3 |   // 自动创建数据表
 4 |   base: {
 5 |     create: 'create database vue_node_mysql_learning'
 6 |   },
 7 | 	// 用户
 8 | 	user: {
 9 | 		add: 'insert into user( username , password) values ( ?, ?)',
10 | 		select_name: 'SELECT * from user where username = ?',
11 | 		select_password : 'SELECT * from user where password = ?',
12 |     update_password : 'update user set password = ? where id = ?',
13 |     //脚步创建数据库表
14 |     create_user:`CREATE TABLE user(
15 |                 id INT NOT NULL AUTO_INCREMENT,
16 |                 username VARCHAR(100) NOT NULL,
17 |                 password VARCHAR(40) NOT NULL,
18 |                 PRIMARY KEY ( id )
19 |                 )ENGINE=InnoDB DEFAULT CHARSET=utf8;`,
20 | 	}
21 | };
22 | module.exports = sqlMap;
23 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view></router-view>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import {getCookie} from './assets/js/cookie.js';
 9 | 
10 | export default {
11 |   name: 'app',
12 |   created(){
13 |     // 在首页时就加载search页面的数据，练习vuex
14 |     let state = this.$store.state
15 |     let city_selected = state.city_selected
16 |     let salary_selected = state.salary_selected
17 |     let positionName_selected = state.positionName_selected
18 |     let search_data = state.search_data
19 |     this.$http.get('../static/listmore.json').then((response)=>{
20 |       let b = response.data.content.data.page.result
21 |       //search页面数据
22 |       state.search_result = b
23 |       //判断用户是否登录
24 |       if(getCookie('username')=='') {
25 |         state.search_data = b
26 |       }else {
27 |         //mine.html页面 精准搜索设置
28 |         b.forEach(item => {
29 |           if(
30 |             (
31 |               city_selected == '全国' ||
32 |               item.city == city_selected
33 |             ) &&
34 |             item.salary == salary_selected &&
35 |             item.positionName.indexOf(positionName_selected) >= 0
36 |           )
37 |           {
38 |             search_data.push(item)
39 |           }
40 |         })
41 |       }
42 |     })
43 |     // 加载历史搜索
44 |     return this.$store.dispatch('history_read')
45 |   },
46 | }
47 | </script>
48 | 
49 | 
50 | <style>
51 | /*自定义normal.css*/
52 | div {
53 |   display: block;
54 | }
55 | html {
56 |   font-family: Helvetica;
57 |   font-size: 65.5%;
58 |   color: #333;
59 | }
60 | input, textarea, button, select, div, footer, header, a {
61 |     -webkit-tap-highlight-color: rgba(0,0,0,0);
62 |     -moz-tap-highlight-color: rgba(0,0,0,0);
63 |     tap-highlight-color: rgba(0,0,0,0);
64 | }
65 | h2, h3, p {
66 |     margin: 0;
67 | }
68 | ul{
69 |   margin: 0;
70 |   list-style: none;
71 |   -webkit-padding-start: 0;
72 |   -moz-padding-start: 0;
73 |   padding-start: 0;
74 | }
75 | li{
76 |   list-style: none;
77 | }
78 | a{
79 |   outline: none;
80 |   text-decoration: none;
81 | }
82 | img, input {
83 |     border: none;
84 |     outline: none;
85 |     padding: 0;
86 | }
87 | </style>
88 | 


--------------------------------------------------------------------------------
/src/assets/js/cookie.js:
--------------------------------------------------------------------------------
 1 | /*用export把方法暴露出来*/
 2 | /*设置cookie*/
 3 | export function setCookie(c_name,value,expire) {
 4 |     var date=new Date()
 5 |     date.setSeconds(date.getSeconds()+expire)
 6 |     document.cookie=c_name+ "="+escape(value)+"; expires="+date.toGMTString()
 7 |     //console.log(document.cookie)
 8 | }
 9 | 
10 | /*获取cookie*/
11 | export function getCookie(c_name){
12 |     if (document.cookie.length>0){
13 |         let c_start=document.cookie.indexOf(c_name + "=")
14 |         if (c_start!=-1){ 
15 |             c_start=c_start + c_name.length+1 
16 |             let c_end=document.cookie.indexOf(";",c_start)
17 |             if (c_end==-1) c_end=document.cookie.length
18 |                 return unescape(document.cookie.substring(c_start,c_end))
19 |             } 
20 |         }
21 |     return ""
22 | }
23 | 
24 | /*删除cookie*/
25 | export function delCookie(c_name){
26 |     setCookie(c_name, "", -1)
27 | }


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1uokun/vue-node-mysql/3015d946046b9cd7aefbcd8d577750687175294e/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Hello.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="content">
  3 | 
  4 |     <myhead></myhead>
  5 | 
  6 |     <!--未登录-->
  7 |     <div class="custom-info" v-if="nologin">
  8 |         <span class="info">
  9 |           10秒钟定制职位
 10 |         </span>
 11 |         <a  href="/login"
 12 |             class="go"
 13 |             @click="jump(s='/user')"
 14 |         >
 15 |           去登录
 16 |         </a>
 17 |     </div>
 18 | 
 19 |     <!--已登录-->
 20 |     <div class="custom-info" v-if="haslogin">
 21 |       <span class="info">
 22 |         {{this.$store.state.positionName_selected + '/'}}
 23 |         {{this.$store.state.city_selected + '/'}}
 24 |         {{this.$store.state.salary_selected}}
 25 |       </span>
 26 |       <a href="/mine" class="go">
 27 |         <em class="glyphicon-edit" ></em>
 28 |         编辑
 29 |       </a>
 30 |     </div>
 31 | 
 32 |     <!--公司列表-->
 33 |     <ul class="list">
 34 |       <li class="list-item"
 35 |           v-for="l in listmore"
 36 |       >
 37 |         <img v-bind:src="'http://www.lagou.com/'+l.companyLogo" class="item-logo">
 38 | 
 39 |         <div class="item-desc">
 40 |           <h2 class="item-title">{{l.companyName}}</h2>
 41 |           <p class="item-info">
 42 |             <span class="item-pos">
 43 |               {{l.positionName}}{{'['+l.city+']'}}
 44 |             </span>
 45 |             <span class="item-salary">
 46 |               {{l.salary}}
 47 |             </span>
 48 |           </p>
 49 |           <p class="item-time">{{l.createTime}}</p>
 50 |         </div>
 51 |       </li>
 52 |       <li class="list-more" v-on:click="getMore">加载更多</li>
 53 |     </ul>
 54 | 
 55 | 
 56 |     <div id="copyright"><p>©2015 lagou.com, all right reserved </p><div class="copyright-item"><span class="phone active">移动版&nbsp;·&nbsp;</span><span class="computer">电脑版&nbsp;·&nbsp;</span><a href="#header">回顶部</a></div></div>
 57 | 
 58 |   <myfoot></myfoot>
 59 | 
 60 |   </div>
 61 | </template>
 62 | 
 63 | <script>
 64 | import myhead from './head'
 65 | import myfoot from './foot'
 66 | import {getCookie} from '../assets/js/cookie.js';
 67 | export default {
 68 |   name: 'hello',
 69 |   components: {
 70 |     myhead,
 71 |     myfoot
 72 |   },
 73 |   data(){
 74 |     return {
 75 |       listmore:[],
 76 |       page:1,
 77 |       nologin:true,
 78 |       haslogin:false,
 79 |     }
 80 |   },
 81 |   mounted(){
 82 |     if(getCookie('username')){
 83 |       this.nologin = false;
 84 |       this.haslogin = true
 85 |     }
 86 |     this.getListData()
 87 |   },
 88 |   methods:{
 89 |     // 加载首页列表
 90 |     getListData(){
 91 |       this.$http.get('/api/list/more?pageSize=15&pageNo='+this.page)
 92 |         .then((response)=>{
 93 |           this.listmore = [...this.listmore,...response.data.content.data.page.result]
 94 |         })
 95 |     },
 96 | 
 97 |     // 加载更多
 98 |     getMore(){
 99 |       this.page+=1;
100 |       return this.getListData()
101 |     }
102 |   }
103 | }
104 | </script>
105 | 
106 | 
107 | 
108 | <style lang="scss">
109 | @import "static/theme.scss";
110 | .custom-info {
111 |   border-bottom: 1px solid $border_color;
112 |   height: 43px;
113 |   line-height: 43px;
114 |   padding: 0 15px;
115 |   color: #555;
116 |   font-size: 1.4rem;
117 |   position: relative;
118 |   .info {
119 |     overflow: hidden;
120 |     text-overflow: ellipsis;
121 |     white-space: nowrap;
122 |     display: block;
123 |     margin-right: 100px;
124 |     height: 100%;
125 |     position: relative;
126 |   }
127 |   a.go {
128 |     position: absolute;
129 |     right: 15px;
130 |     top: 0;
131 |     display: block;
132 |     float: right;
133 |     padding: 0 20px;
134 |     height: 30px;
135 |     line-height: 30px;
136 |     margin-top: 6px;
137 |     border-radius: 15px;
138 |     background-color: $dim_bg_color;
139 |     color:$base_color;
140 |   }
141 | }
142 | 
143 | .glyphicon-edit{
144 |   width: 10px;
145 |   height: 20px;
146 |   @include foot_icon(-88px,7px);
147 |   display: inline-block;
148 | }
149 | 
150 | //-------copyright-------
151 | #copyright {
152 |   text-align: center;
153 |   font-size: 1rem;
154 |   margin-top: 30px;
155 |   padding-bottom: 40px;
156 |   color: #333;
157 |   .copyright-item {
158 |     height: 32px;
159 |     line-height: 32px;
160 |     span.active {color: #999;}
161 |     a {color: #333;&:visited{color: #333;}}
162 |   }
163 | }
164 | 
165 | </style>
166 | 


--------------------------------------------------------------------------------
/src/components/foot.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<footer id="footer">
 3 | 		<div class="footer-tab-custom" v-bind:class="{selected:$route.path=='/'}" v-on:click="jump(s='/')">
 4 | 			<span class="icon" v-bind:class="{selected:$route.path=='/'}"></span>
 5 | 			<span class="text">职位</span>
 6 | 		</div>
 7 | 		<div class="footer-tab-search" v-bind:class="{selected:$route.path=='/search'}" v-on:click="jump(s='/search'),clear()">
 8 | 			<span class="icon" v-bind:class="{selected:$route.path=='/search'}"></span>
 9 | 			<span class="text">搜索</span>
10 | 		</div>
11 | 		<div class="footer-tab-mine" v-bind:class="{selected:$route.path=='/user'}" v-on:click="jump(s='/user')">
12 | 			<span class="icon" v-bind:class="{selected:$route.path=='/user'}"></span>
13 | 			<span class="text">我的</span>
14 | 		</div>
15 | 	</footer>
16 | </template>
17 | 
18 | <script>
19 | 	export default {
20 | 		name:'foot',
21 | 		methods:{
22 | 			jump(s) {
23 | 				this.$router.push({path:s})
24 | 				this.isSelected = s
25 | 			},
26 | 			clear(){
27 | 				this.$store.state.search = []
28 | 			}
29 | 		}
30 | 	}
31 | </script>
32 | 
33 | <style lang="scss" scoped>
34 | @import 'static/theme.scss';
35 | #footer {
36 | 	@extend %nav;
37 | 	position: fixed;
38 | 	bottom: 0px;
39 | 	border-top: 1px solid $border_color;
40 | 	font-size: 1.6rem;
41 | 	div{
42 | 		float:left;
43 | 		width:(100%/3);
44 | 		height:100%;
45 | 		@extend %btn;
46 | 	}
47 | 	div.selected{
48 | 			@extend %btn_selected;
49 | 		}
50 | 	.icon {
51 | 	    display: inline-block;
52 | 	    width: 18px;
53 | 	    height: 17px;
54 | 	    margin-bottom: -2px;
55 | 	}
56 | }
57 | #footer .footer-tab-custom .icon {@include foot_icon(-32px,-2.5px);}
58 | #footer .footer-tab-custom .selected{@include foot_icon(-32px,-20.5px);}
59 | 
60 | #footer .footer-tab-search .icon {@include foot_icon(-14px,-2.5px);}
61 | #footer .footer-tab-search .selected {@include foot_icon(-14px,-20.5px);}
62 | 
63 | #footer .footer-tab-mine .icon {@include foot_icon(-52.5px,-2px);}
64 | #footer .footer-tab-mine .selected {@include foot_icon(-52.5px,-19.5px);}
65 | 
66 | </style>


--------------------------------------------------------------------------------
/src/components/head.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	<header id="header">
3 | 		拉勾网
4 | 	</header>
5 | </template>


--------------------------------------------------------------------------------
/src/components/login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <div class="login-wrap" v-show="showLogin">
  4 |             <p v-show="showTishi">{{tishi}}</p>
  5 |             <input type="text" placeholder="请输入用户名" v-model="username">
  6 |             <input type="password" placeholder="请输入密码" v-model="password">
  7 |             <button v-on:click="login">登录</button>
  8 |             <span>还没账号？</span>
  9 |             <button v-on:click="ToRegister" style="background-color:#fff;border:1px solid #8e8e8e;color:#8e8e8e">注册</button>
 10 |         </div>
 11 | 
 12 |         <div class="register-wrap" v-show="showRegister">
 13 |             <p v-show="showTishi">{{tishi}}</p>
 14 |             <input type="text" placeholder="请输入用户名" v-model="newUsername">
 15 |             <input type="password" placeholder="请输入密码" v-model="newpassword">
 16 |             <button v-on:click="register">注册</button>
 17 |             <span>返回登录</span>
 18 |             <button v-on:click="ToLogin" style="background-color:#fff;border:1px solid #8e8e8e;color:#8e8e8e">登录</button>
 19 |         </div>
 20 |     </div>
 21 | </template>
 22 | 
 23 | <script>
 24 | import {setCookie,getCookie} from '../assets/js/cookie.js';
 25 | export default {
 26 |     name:'login',
 27 | 	data(){
 28 | 		return {
 29 | 			showLogin: true,
 30 |             showRegister: false,
 31 |             showTishi: false,
 32 |             tishi: '',
 33 |             username: '',
 34 |             password: '',
 35 |             newUsername: '',
 36 |             newpassword: ''
 37 | 		}
 38 | 	},
 39 |     mounted(){
 40 |       /*页面挂载获取cookie，如果存在username的cookie，则跳转到主页，不需登录*/
 41 |         if(getCookie('username')){
 42 |             this.$router.push('/user')
 43 |         }
 44 |     },
 45 |     methods:{
 46 |         ToRegister(){
 47 |             this.showRegister = true
 48 |             this.showLogin = false
 49 |         },
 50 |         ToLogin(){
 51 |             this.showRegister = false
 52 |             this.showLogin = true
 53 |         },
 54 |         login() {
 55 |             if(this.username == "" || this.password == "") {
 56 |                 alert("请输入用户名或密码")
 57 |             }else{
 58 |                 let data = {'username':this.username,'password':this.password}
 59 | 
 60 |                 this.$http.post('/api/user/selectUser',data).then((res)=>{
 61 |                     console.log(res)
 62 |                     /*接口的传值是(-1,该用户不存在),(0,密码错误)，同时还会检测管理员账号的值*/
 63 |                     if(res.data == -1) {
 64 |                         this.tishi = "该用户不存在"
 65 |                         this.showTishi = true
 66 |                     }else if(res.data == 0) {
 67 |                         this.tishi = "密码输入错误"
 68 |                         this.showTishi = true
 69 |                     }else {
 70 |                         this.tishi = "登录成功"
 71 |                         this.showTishi = true
 72 |                         setCookie('username',this.username,1000*60)
 73 |                         setTimeout(function(){
 74 |                             //this.$router.push('/user')
 75 |                             window.history.back()
 76 |                         }.bind(this),1000)
 77 |                     }
 78 | 
 79 |                 })
 80 |             }
 81 |         },
 82 | 
 83 |         register(){
 84 |             if(this.newUsername == "" || this.newpassword == ""){
 85 |                 alert("请输入用户名或密码")
 86 |             }else{
 87 |                 let data = {'username':this.newUsername,'password':this.newpassword}
 88 |                 this.$http.post('/api/user/addUser',data).then((res)=>{
 89 |                     console.log(res)
 90 |                     /*接口的传值是(-1,该用户已存在)*/
 91 |                     if(res.data == -1) {
 92 |                         this.tishi = "该账号已存在"
 93 |                         this.showTishi = true
 94 |                         this.username = ''
 95 |                         this.password = ''
 96 |                     }
 97 |                     else if(res.status == 200){
 98 |                         this.tishi = "注册成功"
 99 |                         this.showTishi = true
100 |                         this.username = ''
101 |                         this.password = ''
102 |                          /*注册成功之后再跳回登录页*/
103 |                         setTimeout(function(){
104 |                             this.showRegister = false
105 |                             this.showLogin = true
106 |                             this.showTishi = false
107 |                         }.bind(this),1000)
108 |                     }
109 |                 })
110 |             }
111 |         }
112 |     }
113 | }
114 | </script>
115 | <style lang="scss">
116 |     .login-wrap, .register-wrap{text-align:center;margin-top:100px;}
117 |     .login-wrap{
118 |         input{
119 |             display:block;
120 |             width:250px;
121 |             height:40px;
122 |             line-height:40px;
123 |             margin:0 auto;
124 |             margin-bottom: 10px;
125 |             outline:none; border:1px solid #888;
126 |             padding:10px;
127 |             box-sizing:border-box;
128 |         }
129 |         p{color:red;}
130 |         button{
131 |             display:block;
132 |             width:250px;
133 |             height:40px;
134 |             line-height: 40px;
135 |             margin:0 auto;
136 |             border:none;
137 |             background-color:#41b883;
138 |             color:#fff;
139 |             font-size:16px;
140 |             margin-bottom:5px;
141 |         }
142 |         span{cursor:pointer;
143 |             &:hover{color:#41b883;}
144 |         }
145 |     }
146 | </style>
147 | 


--------------------------------------------------------------------------------
/src/components/mine.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div id="content">
  3 |         <div id="header" class="set">
  4 |         	<div class="left" @click="goBack">
  5 |         		<span class="pull-left glyphicon-corner"></span>
  6 |         	</div>
  7 |         	设置定制信息
  8 |         </div>
  9 | 
 10 | 
 11 | 		<div v-if="url==location">
 12 | 			<ul class="setCustomInfo">
 13 | 		        <li class="item">
 14 | 		            <span class="header">
 15 | 		                职位类型
 16 | 		            </span>
 17 | 		            <a href="/mine?f=1" class="desc">
 18 | 		                
 19 | 		                   {{this.$store.state.positionName_selected}}
 20 | 		                
 21 | 		            </a>
 22 | 		        </li>
 23 | 		    
 24 | 		        <li class="item">
 25 | 		            <span class="header">
 26 | 		                工作地点
 27 | 		            </span>
 28 | 		            <a href="/mine?f=2" class="desc" >
 29 | 		                
 30 | 		                    {{this.$store.state.city_selected}}
 31 | 		                
 32 | 		            </a>
 33 | 		        </li>
 34 | 		    
 35 | 		        <li class="item">
 36 | 		            <span class="header">
 37 | 		                期望薪水
 38 | 		            </span>
 39 | 		            <a href="/mine?f=3" class="desc">
 40 | 		                
 41 | 		                    {{this.$store.state.salary_selected}}
 42 | 		                
 43 | 		            </a>
 44 | 		        </li>
 45 | 		    
 46 | 		        <li class="item">
 47 | 		            <span class="header">
 48 | 		                公司规模
 49 | 		            </span>
 50 | 		            <a href="javascript:;" class="desc">
 51 | 		                
 52 | 		                    没有要求
 53 | 		                
 54 | 		            </a>
 55 | 		        </li>
 56 | 		        <div class="search" v-if="url==location" @click="goBack">
 57 | 		            开始搜索
 58 | 		        </div>
 59 |     		</ul>
 60 | 		</div>
 61 | 
 62 | 
 63 | 
 64 | 
 65 | 
 66 | 
 67 | 
 68 | 		<!--职位选择-->
 69 | 		<div class="dialog" v-if="url=='f=1'">
 70 | 			<div class="info">
 71 | 	            <span class="text">
 72 | 	                <em class="left"></em>
 73 | 	                    想找什么职位？
 74 | 	                <em class="right"></em>
 75 | 	            </span>
 76 |         	</div>
 77 |         	<div class="rinputer">
 78 |         		<input 	class="inputer" 
 79 |         				placeholder="输入你想定制的职位"
 80 |         				v-model="inputer"
 81 |         				@keyup.enter="input"
 82 |         		>
 83 |         		<span class="button" @click="input">OK</span>
 84 |         	</div>
 85 |         	<ul class="predata">
 86 |         		<li class="item" 
 87 |         			v-for="p in this.$store.state.positionName"
 88 |         			@click="positionNameSelect(p)"
 89 |         		>
 90 |         			{{p}}
 91 |         		</li>
 92 |         	</ul>
 93 | 		</div>
 94 | 
 95 | 
 96 | 
 97 | 
 98 | 
 99 | 
100 |     	<!--城市选择city-->
101 | 		<div class="dialog" v-if="url=='f=2'">
102 | 			<div class="info">
103 | 	            <span class="text">
104 | 	                <em class="left"></em>
105 | 	                    告诉我你期望的工作地点
106 | 	                <em class="right"></em>
107 | 	            </span>
108 |         	</div>
109 | 			<div>
110 | 		        <div 	id="city-table"  
111 | 		        		v-for="city in this.$store.state.citys"
112 | 		        >
113 | 		        	<div class="Acronym">
114 | 		        		<span>
115 | 		        			{{city.nameStr}}
116 | 		        		</span>
117 | 		        	</div>
118 | 
119 | 		        	<ul class="city-list">
120 | 		        		<li v-for="c in city.cityList" 
121 | 		        			@click="citySelect(c)"
122 | 		        		>
123 | 		        			{{c}}
124 | 
125 | 		        		</li>
126 | 		        	</ul>
127 | 		        </div>
128 | 	        </div>
129 |         </div>
130 | 
131 | 
132 | 
133 | 
134 | 		<!--薪水区间-->
135 | 		<div class="dialog" v-if="url=='f=3'">
136 | 			<div class="info">
137 | 	            <span class="text up">
138 | 	                <em class="left"></em>
139 | 	                你值得更好的生活，
140 | 	            </span>
141 | 	            <br>
142 | 	            <span class="text down">
143 | 	            	告诉我你期望的薪水。
144 | 	                <em class="right"></em>
145 | 	            </span>
146 |         	</div>
147 |         	<ul class="predata">
148 |         		<li class="item" 
149 |         			v-for="s in this.$store.state.salary"
150 |         			@click="salarySelect(s)"
151 |         		>
152 |         			{{s}}
153 |         		</li>
154 |         	</ul>
155 | 		</div>
156 | 
157 | 
158 | 
159 | 
160 | 
161 |     </div>
162 | </template>
163 | 
164 | <script>
165 | import {setCookie} from '../assets/js/cookie.js';
166 | export default {
167 | 	name:'mine',
168 | 	data(){
169 | 		return {
170 | 			location:location.href,
171 | 			inputer:'',
172 | 			//获取当前浏览器地址?后面的参数
173 | 			url:location.href.substring(location.href.indexOf('?')+1),
174 | 			
175 | 		}
176 | 	},
177 | 	methods:{
178 | 		goBack(){
179 | 			window.history.back()
180 | 		},
181 | 		positionNameSelect(p){
182 | 			setCookie('p',p,1000*60)
183 | 			this.goBack()
184 | 		},
185 | 		citySelect(c){
186 | 			setCookie('c',c,1000*60)
187 | 			this.goBack()
188 | 		},
189 | 		salarySelect(s){
190 | 			setCookie('s',s,1000*60)
191 | 			this.goBack()
192 | 		},
193 | 		input(){
194 | 			setCookie('p',this.inputer,1000*60)
195 | 			this.goBack()
196 | 		}
197 | 	}
198 | }
199 | </script>
200 | 
201 | <style lang="scss">
202 | @import "static/theme.scss";
203 | ul.setCustomInfo{
204 | 	padding:20px;
205 | 	li.item {
206 | 		.header{
207 | 			display: block;
208 | 		    color: #ccc;
209 | 		    font-size: 1.2rem;
210 | 		}
211 | 		.desc{
212 | 			display: block;
213 | 		    margin: 10px 0 20px 0;
214 | 		    text-align: center;
215 | 		    height: 62.5px;
216 | 		    line-height: 62.5px;
217 | 		    color: #333;
218 | 		    font-size: 1.5rem;
219 | 		    background-color: $dim_bg_color;
220 | 		    border-radius: 2px;
221 | 		    overflow: hidden;
222 | 		    text-overflow: ellipsis;
223 | 		    white-space: nowrap;
224 | 		    padding: 0 10px;
225 | 		}
226 | 	}
227 | 	.search{
228 | 		height: 45px;
229 | 	    line-height: 45px;
230 | 	    color: #fff;
231 | 	    background-color: $base_color;
232 | 	    font-size: 1.6rem;
233 | 	    text-align: center;
234 | 	    position: fixed;
235 | 	    bottom: 0;
236 | 	    left: 0;
237 | 	    width: 100%;
238 | 	}
239 | }
240 | 
241 | %quotes{
242 | 	display: inline-block;
243 |     width: 13px;
244 |     height: 10.5px;
245 |     position: absolute;
246 | }
247 | 
248 | 
249 | 
250 | //职位选择
251 | .dialog{
252 | 	width:100%;
253 | 	height:100%;
254 | 	background: #fff;
255 | 	.info{
256 | 		background: url(/static/back-info.jpg) repeat;
257 | 	    background-size: 320px 125px;
258 | 	    height: 125px;
259 | 	    color: #00b38a;
260 | 	    font-size: 1.9rem;
261 | 	    text-align: center;
262 | 	    border-bottom: 1px solid $border_color;
263 | 	    .text{
264 | 	    	display: inline-block;
265 | 		    position: relative;
266 | 		    height: 25px;
267 | 		    top: 50px;
268 | 
269 | 		    .left{
270 | 	    	    left: -20px;
271 | 			    top: -2px;
272 | 			    @include foot_icon(-102.5px,-4px);
273 | 			    @extend %quotes;
274 | 		    }
275 | 		    .right{
276 | 		    	right: -14px;
277 | 			    top: 15px;
278 | 			    @include foot_icon(-119.5px,-4px);
279 | 			    @extend %quotes;
280 | 		    }
281 | 	    }
282 | 	    .up{
283 | 	    	top: 35px;
284 | 			left: -22px;
285 | 	    }
286 | 	    .down{
287 | 	    	top: 40px;
288 | 			left: 23px;
289 | 	    }
290 | 	}
291 | 	.rinputer{
292 | 	    height: 50px;
293 | 		line-height: 50px;
294 | 		border: 1px solid $border_color;
295 | 		position: relative;
296 | 		margin-right: 60px;
297 | 		padding-right: 45px;
298 | 		.inputer{
299 | 			display: block;
300 | 		    margin-left: 23px;
301 | 		    font-size: 1.5rem;
302 | 		    width: 100%;
303 | 		    display: block;
304 |     		height: 100%;
305 | 		}
306 | 		.button{
307 | 			position: absolute;
308 | 		    top: 0;
309 | 		    right: -61px;
310 | 		    width: 60px;
311 | 		    height: 100%;
312 | 		    border-left: 1px solid $border_color;
313 | 		    border-bottom: 1px solid $border_color;
314 | 		    text-align: center;
315 | 		    font-size: 1.5rem;
316 | 		    color: #c2cfcc;
317 | 		    display: block;
318 | 		}
319 | 	}
320 | 	.predata{
321 | 		margin-left: 15px;
322 | 		.item{
323 | 			height: 44px;
324 | 		    line-height: 44px;
325 | 		    color: #666;
326 | 		    font-size: 1.4rem;
327 | 		    border-bottom: 1px solid $border_color;
328 | 		    padding: 0 15px 0 10px;
329 | 		    overflow: hidden;
330 | 		    text-overflow: ellipsis;
331 | 		    white-space: nowrap;
332 | 		}
333 | 	}
334 | }
335 | </style>


--------------------------------------------------------------------------------
/src/components/search.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div id="content">
  3 | 
  4 | 		<myhead></myhead>
  5 | 
  6 | 		<!--搜索框-->
  7 | 		<div class="linputer">
  8 |             <div class="lbutton"
  9 |             	 @click="cityToggle"
 10 |             >
 11 |                 <span class="city">
 12 |                 	{{city_selected}}
 13 |                 </span>
 14 |                 <span class="glyphicon-city"></span>
 15 |             </div>
 16 | 
 17 |             <div class="rinput">
 18 |                 <input 	class="inputer"
 19 |                 		type="text"
 20 |                 		placeholder="搜索职位或公司"
 21 |                 		v-model="keyWord"
 22 |                 		@keyup.enter="getListmore"
 23 |                 >
 24 |                 <span 	class="search"
 25 |                 		@click="getListmore"
 26 |                 >
 27 |                 	<!--搜索按钮图标-->
 28 |                 	<em class="glyphicon-search"></em>
 29 |                	</span>
 30 | 
 31 |             </div>
 32 |         </div>
 33 | 
 34 | 
 35 | 		<!--提示框-->
 36 |         <div class="listcon">
 37 | 
 38 |         	<!--搜索历史提示-->
 39 |             <ul class="history"
 40 |             	v-if="history_show"
 41 |             >
 42 |             	<li class="activeable history-item"
 43 |             		v-for="(h,index) in this.$store.state.history"
 44 |             		@click="click_search(h)"
 45 |             	>
 46 |             		<span class="text">
 47 |             			{{h}}
 48 |             		</span>
 49 | 
 50 | 					<!--删除搜索历史按钮-->
 51 |             		<div class="delcon">
 52 |             			<span 	class="glyphicon-delete"
 53 |             					@click.stop="history_delete(index)"
 54 |             			>
 55 |             			</span>
 56 |             		</div>
 57 | 
 58 |             	</li>
 59 |             </ul>
 60 | 
 61 | 			<!--用户搜索条件提示-->
 62 |             <div	class="custominfo none"
 63 |             		v-if="custominfo"
 64 | 
 65 |             >
 66 |                 将搜索地区和关键词设为定制条件
 67 | 
 68 |             </div>
 69 | 
 70 | 			<!--无结果提示-->
 71 |             <ul class="list">
 72 |             	<li class="list-empty"
 73 |             		v-if="empty"
 74 |             	>
 75 |             		<span class="glyphicon-face"></span>
 76 |             		<span class="text">
 77 |             			拉勾上暂时没有这样的职位
 78 |             		</span>
 79 |             	</li>
 80 |             </ul>
 81 | 
 82 |         </div>
 83 | 
 84 | 
 85 | 		<!--搜索结果list-->
 86 | 		<ul class="list" style="margin-bottom:45px;">
 87 | 	      <li 	class="list-item"
 88 | 	      		v-for="(l,index) in filterSearch"
 89 | 	      		v-if="index<=num"
 90 | 	      >
 91 | 	        <img 	class="item-logo"
 92 | 	        		v-bind:src="'http://www.lagou.com/'+l.companyLogo"
 93 | 	        >
 94 | 	        <div class="item-desc">
 95 | 	          <h2 class="item-title">
 96 | 
 97 | 	          		{{l.companyName}}
 98 | 
 99 | 	          </h2>
100 | 	          <p class="item-info">
101 | 	            <span class="item-pos">
102 | 
103 | 	              	{{l.positionName}}
104 | 	              	{{'['+l.city+']'}}
105 | 
106 | 	            </span>
107 | 	            <span class="item-salary">
108 | 
109 | 	              	{{l.salary}}
110 | 
111 | 	            </span>
112 | 	          </p>
113 | 	          <p class="item-time">
114 | 
115 | 	          		{{l.createTime}}
116 | 
117 | 	          </p>
118 | 	        </div>
119 | 	      </li>
120 | 	      <li 	class="list-more"
121 | 	      		@click="getMore"
122 | 	      		v-if="filterSearch.length!==0 && num<filterSearch.length"
123 | 	      >
124 | 	  			加载更多
125 | 	  	  </li>
126 | 	    </ul>
127 | 
128 | 
129 | 		<!--城市选择city-->
130 | 		<div 	class="fdialog-rcon"
131 | 				v-show="hide"
132 | 		>
133 | 	        <div id="header">
134 | 	        	<div class="left" v-on:click="cityToggle">
135 | 	        		<span 	class="pull-left glyphicon-corner">
136 | 	        		</span>
137 | 	        	</div>
138 | 
139 | 	        	拉勾网
140 | 
141 | 	        </div>
142 | 
143 | 			<div class="fdialog-rcon-child">
144 | 		        <div 	id="city-table"
145 | 		        		v-for="city in this.$store.state.citys"
146 | 		        >
147 | 		        	<div class="Acronym">
148 | 		        		<span>
149 | 		        			{{city.nameStr}}
150 | 		        		</span>
151 | 		        	</div>
152 | 
153 | 		        	<ul class="city-list">
154 | 		        		<li v-for="list in city.cityList"
155 | 		        			@click="citySelect(list)"
156 | 		        			v-bind:class="{selected:l==list}"
157 | 		        		>
158 | 		        			{{list}}
159 | 
160 | 		        		</li>
161 | 		        	</ul>
162 | 		        </div>
163 | 	        </div>
164 |         </div>
165 | 
166 | 	<myfoot></myfoot>
167 | 
168 | 	</div>
169 | </template>
170 | 
171 | <script>
172 | import myhead from './head'
173 | import myfoot from './foot'
174 | export default {
175 | 	name:'search',
176 | 	components: {
177 | 		myhead,
178 | 		myfoot
179 | 	},
180 | 	data(){
181 | 		return {
182 | 			city_selected:'全国',
183 | 			num:15,
184 | 			filterSearch:[],
185 | 			keyWord:'',
186 | 			hide:false,
187 | 			custominfo:false,
188 | 			empty:false,
189 | 			history_show:true,
190 | 			l:'',
191 | 		}
192 | 	},
193 | 
194 | 	methods:{
195 | 		cityToggle() {
196 | 			return this.hide = this.hide == false ? true : false;
197 | 		},
198 | 		citySelect(list) {
199 | 			this.l = list
200 | 			this.city_selected = list
201 | 			if(this.keyWord!='')this.getListmore()
202 | 			this.hide = false;
203 | 		},
204 | 		history_delete(index) {
205 | 			this.$store.dispatch('history_delete',index)
206 | 		},
207 | 		click_search(h) {
208 | 			this.keyWord = h
209 | 			return this.getListmore()
210 | 		},
211 | 		getMore(){
212 |       this.num+=15
213 |     },
214 |     getListmore: function() {
215 |         this.num = 15
216 |           let keyWord = this.keyWord
217 |           let search_result = this.$store.state.search_result
218 |           let city_selected = this.city_selected
219 |           let filterSearch = this.filterSearch = []
220 | 
221 |           search_result.forEach(function(item){
222 |               if((city_selected == '全国' || item.city == city_selected) &&item.positionName.indexOf(keyWord)>=0){
223 | 
224 |                 filterSearch.push(item)
225 |               }
226 |           })
227 |           if(filterSearch==0) {
228 |             this.empty=true
229 |           }else {
230 |             this.empty=false
231 |           }
232 |           this.custominfo=true
233 |       this.history_show = false
234 |       //记录搜索历史，localstrong
235 |           this.$store.dispatch('history_record',keyWord)
236 |       },
237 | 	}
238 | }
239 | </script>
240 | 
241 | 
242 | <style lang="scss">
243 | @import "static/theme.scss";
244 | .linputer {
245 | 	position: relative;
246 | 	border-bottom: 1px solid $border_color;
247 | 	height: 45px;
248 | 	&:after {
249 | 		content: ".";
250 | 		display: block;
251 | 		height: 0;
252 | 		clear: both;
253 | 		visibility: hidden;
254 | 	}
255 | }
256 | .lbutton {
257 |     float: left;
258 |     height: 45px;
259 |     line-height: 45px;
260 |     font-size: 1.5rem;
261 |     text-align: center;
262 |     width: 88px;
263 |     border-right: 1px solid $border_color;
264 |     span {
265 |     	display: inline-block;
266 | 	}
267 | 	.glyphicon-city {
268 | 	    width: 8.5px;
269 | 	    height: 7px;
270 | 	    @include foot_icon(-1px,-2.5px);
271 | 	}
272 | }
273 | 
274 | 
275 | .rinput {
276 |     height: 45px;
277 |     margin-left: 89px;
278 |     position: relative;
279 |     .inputer {
280 | 	    display: block;
281 | 	    border: none;
282 | 	    padding: 10px 0;
283 | 	    height: 25px;
284 | 	    line-height: 25px;
285 | 	    color: #333;
286 | 	    width: 75%;
287 | 	    margin: 0 0 0 5%;
288 | 	    font-size: 1.5rem;
289 | 	    float: left;
290 | 	}
291 | 	.search {
292 | 	    display: inline-block;
293 | 	    width: 20%;
294 | 	    height: 45px;
295 | 	    line-height: 45px;
296 | 	    float: right;
297 | 	    position: relative;
298 | 	    .glyphicon-search {
299 | 		    display: block;
300 | 		    margin: 14px auto 0 auto;
301 | 		    width: 17px;
302 | 		    height: 17px;
303 | 		    @include foot_icon(-14px,-2.5px);
304 | 		}
305 | 	}
306 | 	&:after{
307 |     	@extend %after_clearfix;
308 |     }
309 | }
310 | 
311 | 
312 | .history {
313 |     background-color: $dim_bg_color;
314 |     color: #666;
315 |     .history-item {
316 | 	    height: 45px;
317 | 	    line-height: 45px;
318 | 	    font-size: 1.4rem;
319 | 	    border-bottom: 1px solid $border_color;
320 | 	    padding: 0 0 0 23px;
321 | 	}
322 | 	.delcon {
323 | 	    float: right;
324 | 	    width: 40px;
325 | 	    height: 45px;
326 | 	    text-align: center;
327 | 	    width: 14%;
328 | 	    .glyphicon-delete {
329 | 		    display: inline-block;
330 | 		    height: 10px;
331 | 		    width: 12px;
332 | 		    @include foot_icon(-71.5px,-4px);
333 | 		}
334 | 	}
335 | }
336 | 
337 | .custominfo {
338 |     height: 35px;
339 |     line-height: 35px;
340 |     font-size: 1.4rem;
341 |     color: $base_color;
342 |     background-color: $btn_bg_color;
343 |     text-align: center;
344 |     margin-top: 16px;
345 |     margin-bottom: 14px;
346 | }
347 | .list .list-empty {
348 |     text-align: center;
349 |     font-size: 1.5rem;
350 |     margin-top: 30px;
351 |     color: $dim_font_color;
352 |     %list-empty {
353 | 	    display: inline-block;
354 | 	    vertical-align: middle;
355 | 	}
356 |     .glyphicon-face {
357 | 	    width: 20px;
358 | 	    height: 20px;
359 | 	    @include foot_icon(-70px,-18.5px);
360 | 	    @extend %list-empty;
361 | 	}
362 | 	.text {
363 | 		@extend %list-empty;
364 | 	}
365 | }
366 | 
367 | //city-list头尾固定，中间滚动样式
368 | .fdialog-rcon{
369 | 	width:100%;
370 | 	height:100%;
371 | 	background: #fff;
372 | 	top:0;
373 | 	left:0;
374 | 	z-index:999;
375 | 	position: fixed;
376 | }
377 | .fdialog-rcon-child {
378 | 	height: 100%;
379 |     overflow: scroll;
380 |     -webkit-overflow-scrolling: touch;
381 |     -moz-overflow-scrolling: touch;
382 |     overflow-scrolling: touch;
383 | }
384 | </style>
385 | 


--------------------------------------------------------------------------------
/src/components/user.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div id="content">
  3 | 
  4 | 		<myhead></myhead>
  5 | 
  6 | 		<div class="logininfo">
  7 |             <!-- 未登录 -->
  8 |             <div class="nologin center" v-if="nologin">
  9 |                 <a class="loginbtn" href="/login">登录 / 注册</a>
 10 |             </div>
 11 | 
 12 | 			<!-- 已登录 -->
 13 |             <div class="haslogin center" v-if="haslogin">
 14 |                 <a class="button" href="#" target="_self"> 
 15 |                 	简历&gt; 
 16 |                 </a>
 17 |                 <div class="headcon">
 18 |                 	<img class="headpic" src="https://www.vue-js.com/public/images/vue.png">
 19 |             	</div>
 20 |             	<div class="name">{{username}}</div>
 21 |             </div>
 22 |         </div>
 23 | 		
 24 | 		
 25 | 
 26 |         <div class="buttons">
 27 |             
 28 |             <a class="button pull-left" href="#">
 29 |                 
 30 |                 <span>投递</span>
 31 |                 
 32 |             </a>
 33 |             <a class="button pull-right" href="#">
 34 |             	
 35 |             	<span>面试</span>
 36 | 
 37 |             </a>
 38 |             <a class="button pull-left" href="#">
 39 |                 
 40 |                 <span>邀约</span>
 41 | 
 42 |             </a>
 43 |             
 44 |             <a class="button pull-right" href="#">
 45 |             	
 46 | 				<span>收藏</span>
 47 | 
 48 |             </a>
 49 | 
 50 |             <a class="button pull-left logout" href="/user" @click="quit" v-if="haslogin">退出登录</a>
 51 |         </div>
 52 | 	
 53 | 	<myfoot></myfoot>
 54 | 
 55 | 	</div>
 56 | </template>
 57 | 
 58 | <script>
 59 | import myhead from './head'
 60 | import myfoot from './foot'
 61 | import {setCookie,getCookie,delCookie} from '../assets/js/cookie.js';
 62 | export default {
 63 | 	name:'user',
 64 | 	components: {
 65 | 		myhead,
 66 | 		myfoot
 67 | 	},
 68 | 	data(){
 69 | 		return {
 70 | 			username:'',
 71 | 			haslogin:false,
 72 | 			nologin:true
 73 | 		}
 74 | 	},
 75 | 	mounted(){
 76 | 		if(getCookie('username')){
 77 | 			this.username = getCookie('username')
 78 | 			this.haslogin = true
 79 | 			this.nologin = false
 80 | 		}
 81 | 		
 82 | 	},
 83 | 	methods:{
 84 | 		quit(){
 85 |                 /*删除cookie*/
 86 |                 delCookie('username')
 87 |             }
 88 | 	}
 89 | }
 90 | </script>
 91 | 
 92 | <style lang="scss" scoped>
 93 | @import "static/theme.scss";
 94 | #content {
 95 | 	margin-bottom: 45px;
 96 |     
 97 |     &:after{
 98 |     	@extend %after_clearfix;
 99 |     }
100 | }
101 | 
102 | .logininfo {
103 |     margin: 10px 15px;
104 | }
105 | 
106 | .nologin {
107 | 	width: 125px;
108 |     height: 111px;
109 |     .loginbtn {
110 | 	    font-size: 1.4rem;
111 | 	    color: #fff;
112 | 	    display: block;
113 | 	    width: 100%;
114 | 	    height: 45px;
115 | 	    line-height: 45px;
116 | 	    text-align: center;
117 | 	    margin: 0 auto;
118 | 	    background-color: rgba($base_color,.8);
119 | 	    position: relative;
120 | 	    top: 33px;
121 | 	}
122 | }
123 | 
124 | 
125 | 
126 | 
127 | 
128 | 
129 | .haslogin {
130 |     position: relative;
131 |     width: 100%;
132 |     top: 10px;
133 |     height: 111px;
134 |     .button {
135 | 	    position: absolute;
136 | 	    color: $base_color;
137 | 	    font-size: 1.4rem;
138 | 	    right: 0;
139 | 	}
140 | 	.headcon {
141 | 	    height: 81px;
142 | 	    width: 81px;
143 | 	    margin: 0 auto;
144 | 	    -webkit-border-radius: 40.5px;
145 | 	    -moz-border-radius: 40.5px;
146 | 	    border-radius: 40.5px;
147 | 	    -moz-background-clip: padding;
148 | 	    -webkit-background-clip: padding-box;
149 | 	    background-clip: padding-box;
150 | 	    overflow: hidden;
151 | 	    background-color: $dim_bg_color;
152 | 	}
153 | 	.name {
154 | 	    font-size: 1.4rem;
155 | 	    color: #333;
156 | 	    height: 22px;
157 | 	    line-height: 22px;
158 | 	}
159 | 	.headpic {
160 | 	    width: 72px;
161 | 	    height: 72px;
162 | 	    margin: 4px 0 0 1px;
163 | 	    -webkit-border-radius: 36px;
164 | 	    -moz-border-radius: 36px;
165 | 	    border-radius: 36px;
166 | 	    -moz-background-clip: padding;
167 | 	    -webkit-background-clip: padding-box;
168 | 	    background-clip: padding-box;
169 | 	}
170 | 
171 | }
172 | 
173 | 
174 | 
175 | 
176 | 
177 | 
178 | 
179 | 
180 | #content .buttons {
181 |     margin-bottom: 10px;
182 |     padding: 0 15px;
183 |     .button {
184 | 	    display: block;
185 | 	    width: 48%;
186 | 	    height: 86px;
187 | 	    line-height: 86px;
188 | 	    background-color: rgba($base_color,.8);
189 | 	    text-align: center;
190 | 	    color: #fff;
191 | 	    font-size: 1.6rem;
192 | 	    margin-top: 10px;
193 | 	    position: relative;
194 | 	}
195 | 	&:after{
196 |     	@extend %after_clearfix;
197 |     }
198 |     .logout {
199 | 	    width: 100%;
200 | 	    height: 40px;
201 | 	    line-height: 40px;
202 | 	}
203 | }
204 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | import router from './router'
 4 | 
 5 | import axios from 'axios'
 6 | Vue.prototype.$http = axios;
 7 | import store from './vuex/store'
 8 | new Vue({
 9 |   el: '#app',
10 |   router,
11 |   store,
12 |   template: '<App/>',
13 |   components: { App },
14 | })
15 | 			


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Hello from '@/components/Hello'
 4 | import Search from '@/components/Search'
 5 | import User from '@/components/User'
 6 | import Login from '@/components/login'
 7 | import Mine from '@/components/mine'
 8 | 
 9 | Vue.use(Router)
10 | 
11 | export default new Router({
12 |   	mode:'history',
13 |   	routes: [
14 |     {
15 |       path: '/',
16 |       name: 'Hello',
17 |       component: Hello
18 |     },
19 |     {
20 |       path: '/search',
21 |       name: 'Search',
22 |       component: Search
23 |     },
24 |     {
25 |       path: '/user',
26 |       name: 'User',
27 |       component: User
28 |     },
29 |     {
30 |       path: '/login',
31 |       name: 'Login',
32 |       component: Login
33 |     },
34 |     {
35 |       path: '/mine',
36 |       name: 'Mine',
37 |       component: Mine
38 |     }
39 |   ]
40 | })
41 | 


--------------------------------------------------------------------------------
/src/vuex/actions.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import * as types from './mutation-types'
 3 | 
 4 | export default {
 5 | 	history_record({ commit },search) {
 6 | 		commit(types.HISTORY_RECORD,search)
 7 | 	},
 8 | 	history_read({ commit }) {
 9 | 		commit(types.HISTORY_READ)
10 | 	},
11 | 	history_delete({ commit },index) {
12 | 		commit(types.HISTORY_DELETE,index)
13 | 	},
14 | }
15 | 


--------------------------------------------------------------------------------
/src/vuex/mutation-types.js:
--------------------------------------------------------------------------------
1 | 
2 | export const HISTORY_RECORD = 'history_record'
3 | export const HISTORY_READ = 'history_read'
4 | export const HISTORY_DELETE = 'history_delete'
5 | 
6 | 


--------------------------------------------------------------------------------
/src/vuex/mutations.js:
--------------------------------------------------------------------------------
 1 | import * as types from './mutation-types'
 2 | 
 3 | export default {
 4 | 	//搜索历史记录
 5 | 	[types.HISTORY_RECORD] (state,search) {
 6 | 		state.history.push(search)
 7 | 		//提示：在history中删除重复数据
 8 | 		 Array.prototype.del = function() {
 9 | 		   var a = {}, c = [], l = this.length;
10 | 		   for (var i = 0; i < l; i++) {
11 | 		     var b = this[i];
12 | 		     var d = (typeof b) + b;
13 | 		     if (a[d] === undefined) {
14 | 		       c.push(b);
15 | 		       a[d] = 1;
16 | 		     }
17 | 		    }
18 | 		    return c;
19 | 		 }
20 | 		state.history = state.history.del()
21 | 		window.localStorage.setItem('HISTORY_RECORD',JSON.stringify(state.history));
22 | 	},
23 | 	//读取搜索历史记录
24 | 	[types.HISTORY_READ](state) {
25 | 		if (window.localStorage.getItem("HISTORY_RECORD")) {
26 |           state.history=JSON.parse(window.localStorage.getItem('HISTORY_RECORD'));
27 |         }else state.history=[]
28 | 	},
29 | 	//删除搜索历史记录
30 | 	[types.HISTORY_DELETE](state,index) {
31 | 		state.history.splice(index,1)
32 | 		window.localStorage.setItem('HISTORY_RECORD',JSON.stringify(state.history));
33 | 	},
34 | }


--------------------------------------------------------------------------------
/src/vuex/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import mutations from './mutations'
 4 | import actions from './actions'
 5 | import {getCookie} from '../assets/js/cookie.js';
 6 | Vue.use(Vuex)
 7 | 
 8 | const state = {
 9 |     citys:[
10 |         {
11 |             "cityList":["北京","上海","广州","深圳","成都","杭州"],
12 |             "name":"热门城市",
13 |             "nameStr":"热门城市"
14 |         },
15 |         {
16 |             "cityList":["安庆","安阳","保定","北京","包头","长春","成都","重庆","长沙","常州","郴州","沧州","东莞","大连","东营","佛山","阜阳","福州","抚州"],
17 |             "name":"",
18 |             "nameStr":"ABCDEF"
19 |         },
20 |         {
21 |             "cityList":["桂林","贵阳","广州","赣州","邯郸","哈尔滨","合肥","呼和浩特","海口","衡水","河源","杭州","惠州","湖州","金华","九江","吉林","江门","济南","济宁","嘉兴","荆州"],
22 |             "name":"",
23 |             "nameStr":"GHIJ"
24 |         },
25 |         {
26 |             "cityList":["昆明","聊城","廊坊","丽水","拉萨","临沂","洛阳","连云港","兰州","柳州","泸州","马鞍山","茂名","绵阳","梅州","宁波","南昌","南京","南宁","南通","南阳"],
27 |             "name":"",
28 |             "nameStr":"KLMN"
29 |         },
30 |         {
31 |             "cityList":["平顶山","莆田","濮阳","青岛","秦皇岛","清远","泉州","衢州","日照"],
32 |             "name":"",
33 |             "nameStr":"OPQR"
34 |         },
35 |         {
36 |             "cityList":["上海","石家庄","汕头","汕尾","绍兴","沈阳","三亚","深圳","苏州","宿州","泰安","天津","唐山","太原","台州"],
37 |             "name":"",
38 |             "nameStr":"STUV"
39 |         },
40 |         {
41 |             "cityList":["潍坊","武汉","芜湖","威海","乌鲁木齐","无锡","温州","西安","孝感","香港特别行政区","厦门","西宁","新乡","咸阳","襄阳","徐州","宜宾","银川","盐城","宜昌","烟台","扬州","淄博","珠海","镇江","湛江","肇庆","中山","遵义","郑州","漳州","株洲"],
42 |             "name":"",
43 |             "nameStr":"WXYZ"
44 |         }
45 |     ],
46 |     positionName:['产品经理','Java','运营','Android','PHP','UI','IOS','编辑','BD'],
47 |     salary:['没有要求','2k以下','2k-5k','5k-10k','10k-15k','15k-25k','25k-50k','50k以上'],
48 |     positionName_selected:getCookie('p'),
49 |     city_selected:getCookie('c'),
50 |     salary_selected:getCookie('s'),
51 |     history:[],         //搜索历史
52 |     search_result:[],   //搜索列表
53 |     search_data: [],    //搜索数据（这里用的假数据而不是通过接口获取，可以练习vuex）
54 |     filterSearch:[]
55 | }
56 | export default new Vuex.Store({
57 |     state,
58 |     mutations,
59 |     actions
60 | });
61 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1uokun/vue-node-mysql/3015d946046b9cd7aefbcd8d577750687175294e/static/.gitkeep


--------------------------------------------------------------------------------
/static/QQ截图20180529230333.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1uokun/vue-node-mysql/3015d946046b9cd7aefbcd8d577750687175294e/static/QQ截图20180529230333.png


--------------------------------------------------------------------------------
/static/QQ截图20180529230411.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1uokun/vue-node-mysql/3015d946046b9cd7aefbcd8d577750687175294e/static/QQ截图20180529230411.png


--------------------------------------------------------------------------------
/static/back-info.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1uokun/vue-node-mysql/3015d946046b9cd7aefbcd8d577750687175294e/static/back-info.jpg


--------------------------------------------------------------------------------
/static/icon2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1uokun/vue-node-mysql/3015d946046b9cd7aefbcd8d577750687175294e/static/icon2.png


--------------------------------------------------------------------------------
/static/theme.scss:
--------------------------------------------------------------------------------
  1 | $base_color: #00b38a;
  2 | $dim_font_color: #c2cfcc;
  3 | $dim_bg_color: #f5f5f5;
  4 | $btn_bg_color: #e7f3f0;
  5 | $border_color:#e8e8e8;
  6 | @mixin foot_icon($x,$y) {
  7 | 	background:url(/static/icon2.png) no-repeat $x $y;
  8 | 	background-size: 250px 250px;
  9 | }
 10 | %nav {
 11 | 	width:100%;
 12 | 	height: 45px;
 13 |   	line-height: 45px;
 14 |   	text-align: center;
 15 | }
 16 | %btn {
 17 | 	color:$dim_font_color;
 18 | 	background-color: $dim_bg_color;
 19 | 	text-align: center;
 20 | }
 21 | %btn_selected {
 22 | 	color: $base_color;
 23 |     background-color: $btn_bg_color;
 24 | }
 25 | %after_clearfix {
 26 | 	content: ".";
 27 |     display: block;
 28 |     height: 0;
 29 |     clear: both;
 30 |     visibility: hidden;
 31 | }
 32 | 
 33 | //--------------公共样式----------------------------------
 34 | .pull-left{float: left;}
 35 | .pull-right{float: right;}
 36 | .center {text-align: center;width: 125px;margin: 0 auto;}
 37 | .selected{background-color: #e7f3f0;}
 38 | //--------------------------------------------------------
 39 | 
 40 | 
 41 | //---------公司信息list---------------
 42 | .list {
 43 | 	.list-item {
 44 |   		padding: 14px;
 45 |   		border-bottom: 1px solid #e8e8e8;
 46 |   		&:after {
 47 | 		  content: ".";
 48 | 		  display: block;
 49 | 		  height: 0;
 50 | 		  clear: both;
 51 | 		  visibility: hidden;
 52 | 		}
 53 | 	}
 54 | 	.item-logo {
 55 | 	  display: inline-block;
 56 | 	  float: left;
 57 | 	  width: 60px;
 58 | 	  height: 60px;
 59 | 	}
 60 | 	.item-desc {
 61 | 	  margin-left: 70px;
 62 | 	  height: 62px;
 63 | 	  color: #333;
 64 | 	}
 65 | 	.item-title {
 66 | 	  font-size: 1.6rem;
 67 | 	  margin-bottom: 6px;
 68 | 	  width: 80%;
 69 | 	  overflow: hidden;
 70 | 	  text-overflow: ellipsis;
 71 | 	  white-space: nowrap;
 72 | 	}
 73 | 	.item-pos {
 74 | 	  font-size: 1.2rem;
 75 | 	  float: left;
 76 | 	  width: 60%;
 77 | 	  display: inline-block;
 78 | 	  overflow: hidden;
 79 | 	  text-overflow: ellipsis;
 80 | 	  white-space: nowrap;
 81 | 	}
 82 | 	.item-info {
 83 | 	  margin-bottom: 6px;
 84 | 	  width: 100%;
 85 | 	  height: 15px;
 86 | 	  line-height: 15px;
 87 | 	}
 88 | 	.item-time {
 89 | 	  font-size: 1rem;
 90 | 	  color: #888;
 91 | 	}
 92 | 	.item-salary {
 93 | 	  font-size: 1.6rem;
 94 | 	  color: $base_color;
 95 | 	  float: right;
 96 | 	}
 97 | 	.list-more {
 98 | 	  height: 50px;
 99 | 	  line-height: 50px;
100 | 	  text-align: center;
101 | 	  font-size: 1.5rem;
102 | 	  background-color: $dim_bg_color;
103 | 	}
104 | }
105 | 
106 | //---------city-list-----------
107 | .city-list {
108 |     width: 100%;
109 |     height:auto;
110 |     li{
111 | 		width: (100%/3);
112 | 	    height: 60px;
113 | 	    float: left;
114 | 	    line-height: 60px;
115 | 	    text-align: center;
116 | 	    font-size: 1.5rem;
117 | 	    color: #333;
118 | 	    min-width: 100px;
119 | 	}
120 | 	&:after{
121 | 		@extend %after_clearfix;
122 | 	}
123 | }
124 | .Acronym {
125 | 	border-bottom: 1px solid $border_color;
126 | 	border-top: 1px solid $border_color;
127 | 	width:100%;
128 |     height: 25px;
129 |     line-height: 25px;
130 |     font-size: 1.2rem;
131 |     color: #888;
132 |     span{padding-left: 25px;}
133 | }
134 | #city-table:last-child{
135 | 	margin-bottom:60px;
136 | 	border-bottom: 1px solid $border_color;
137 | }
138 | 
139 | 
140 | //-------my-head--------
141 | #header{
142 | 	@extend %nav;
143 | 	background-color:$base_color;
144 | 	color: #fff;
145 | 	font-size: 1.8rem;
146 | 	.left{
147 | 		position: absolute;
148 | 	    left: 0;
149 | 	    top: 0;
150 | 	    height: 100%;
151 | 	    width: 40px;
152 | 	}
153 | 	.glyphicon-corner {
154 | 	    width: 20px;
155 | 	    height: 20px;
156 | 	    margin: 13px auto 0 20px;
157 | 	    @include foot_icon(-1.5px, -20.5px);
158 | 	    display: inline-block;
159 | 	}
160 | }
161 | 
162 | //-------normalize--------
163 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}/*# sourceMappingURL=normalize.min.css.map */
164 | 


--------------------------------------------------------------------------------