├── .babelrc ├── .gitignore ├── README.md ├── assets ├── README.md ├── css │ ├── base.scss │ ├── temp.scss │ └── varibale.scss ├── font │ ├── demo.css │ ├── demo_index.html │ ├── iconfont.css │ ├── iconfont.eot │ ├── iconfont.js │ ├── iconfont.svg │ ├── iconfont.ttf │ ├── iconfont.woff │ └── iconfont.woff2 ├── img │ ├── 1.png │ ├── 12_12.jpg │ ├── 2.png │ ├── 3.png │ ├── 8_8.jpg │ ├── about.png │ ├── arrow.png │ ├── arrow1.png │ ├── beianico.png │ ├── ellipse.png │ ├── feedback.png │ ├── green.png │ ├── home1.png │ ├── link.png │ ├── logo.png │ ├── look.png │ ├── news.png │ ├── phone.png │ ├── pink.png │ ├── serBG.png │ └── show.png └── testimg │ ├── 1563520246158上传的图片.jpg │ └── 1563520312322上传的图片.jpg ├── base64.js ├── components ├── README.md ├── home │ ├── bottom.vue │ ├── index.vue │ └── top.vue └── public │ ├── footer │ └── index.vue │ └── header │ ├── index.vue │ ├── left-bar.vue │ └── right-bar.vue ├── dbs ├── config.js └── models │ └── service.js ├── layouts ├── README.md ├── default.vue ├── error.vue └── none.vue ├── md ├── img-base64.html ├── mongoose笔记.md ├── nuxt问题总结.md ├── redis笔记.md ├── ssl签发笔记.md ├── 学习笔记.html ├── 学习笔记.md ├── 安装选项图.png ├── 让koa、nuxt等node项目使用ES6.md └── 部署nuxt-koa2遇到的坑.md ├── middleware └── README.md ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages ├── README.md ├── about.vue ├── admin.vue ├── edit.vue ├── index.vue ├── news │ ├── _id.vue │ └── index.vue ├── privacy.vue ├── service.vue └── terms.vue ├── plugins ├── README.md ├── element-ui.js └── vue-mavon-editor.js ├── server ├── index.js └── service.js ├── static ├── README.md └── favicon.ico └── store └── README.md /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env"] 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | .editorconfig 83 | 84 | # Service worker 85 | sw.* 86 | 87 | # Mac OSX 88 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 基于Nuxt(Vue) + koa2 + mongodb构建的全栈开源项目。 2 | 3 | 4 | ## 使用方法 5 | 6 | ``` bash 7 | 8 | # 安装依赖 9 | $ npm run install 10 | 11 | # 运行 12 | $ npm run dev 13 | 14 | # 打包 15 | $ npm run build 16 | 17 | # 线上使用pm2部署 18 | $ npm run prd 19 | 20 | ``` 21 | 22 | 23 | ## 目录结构 24 | 25 | 26 | ``` 27 | 28 | 红豆记 29 | | 30 | │ README.md 项目说明文件 31 | | 32 | | layouts 布局目录，用于组织应用的布局组件，不可更改 33 | | 34 | | pages 用于存放写的页面，我们主要的工作区域 35 | | 36 | | server 使用node koa2框架写后台和服务端渲染 37 | | 38 | | dbs 存放数据库配置文件 39 | | 40 | │ nuxt.config.js 用于组织Nuxt.js应用的个性化配置，已覆盖默认配置 41 | | 42 | │ package-lock.json npm自动生成，用于帮助package的统一设置的，yarn也有相同的操作 43 | | 44 | │ package.json npm 包管理配置文件 45 | | 46 | │ .nuxt Nuxt自动生成，临时的用于编辑的文件，build 47 | | 48 | | assets 用于组织未编译的静态资源如LESS、SASS或JavaScript 49 | | 50 | | components 用于自己编写的Vue组件，比如波动组件、日历组件、分页组件 51 | | 52 | | middleware 用于存放中间件 53 | | 54 | | plugins 用于存放JavaScript插件的地方 55 | | 56 | | static 用于存放静态资源文件，比如图片 57 | | 58 | | store 用于组织应用的Vuex 状态管理 59 | | 60 | | .editorconfig 开发工具格式配置 61 | | 62 | | .eslintrc.js ESLint的配置文件，用于检查代码格式 63 | | 64 | | .gitignore 配置git不上传的文件 65 | | 66 | | 67 | └───layouts 公共模板入口文件 68 | | | 69 | │ │ default.vue 默认入口文件 70 | | | 71 | │ │ error.vue 404错误页面 72 | | | 73 | │ │ none.vue 空白页面(用来写注册协议和隐私协议适配手机) 74 | | | 75 | │ │ ... 76 | │ 77 | │ 78 | └───components 公用组件封装 79 | | | 80 | │ │ home 首页组件 81 | | | 82 | │ │ public 首页组件封装 83 | | | 84 | │ │ ... 85 | │ 86 | │ 87 | └───page 路由界面 88 | │ │ 89 | │ │ index 首页 90 | │ │ 91 | │ │ about 关于我们 92 | │ │ 93 | │ └───news 最新动态 94 | │ │ index.vue 动态主页 95 | │ │ _id.vue 动态详情页 96 | │ └─ ... 97 | │ │ 98 | │ │ service.vue 意见反馈 99 | │ │ 100 | │ │ edit.vue markdown测试文件 101 | │ │ 102 | │ │ privacy.vue 隐私协议 103 | │ │ 104 | │ │ terms.vue 注册协议 105 | │ │ 106 | │ │ ... 107 | │ │ 108 | │ │ 109 | └───md 从零开始nuxt开发记录文档 110 | . 111 | 112 | ``` 113 | 114 | 115 | -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /assets/css/base.scss: -------------------------------------------------------------------------------- 1 | // css全局样式文件 2 | 3 | // 字体图标 4 | @font-face { 5 | font-family: "iconfont"; 6 | src: url("../font/iconfont.eot"); 7 | src: url("../font/iconfont.eot?#iefix") format("embedded-opentype"), url("../font/iconfont.woff2") format("woff2"), 8 | url("../font/iconfont.woff") format("woff"), url("../font/iconfont.ttf") format("truetype"), 9 | url("../font/iconfont.svg#iconfont") format("svg"); 10 | } 11 | .iconfont { 12 | font-family: "iconfont" !important; 13 | font-size: 16px; 14 | font-style: normal; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | 19 | * { 20 | box-sizing: border-box; 21 | } 22 | 23 | html { 24 | -webkit-text-size-adjust: 100%; 25 | -webkit-tap-highlight-color: transparent; 26 | -webkit-font-smoothing: antialiased; 27 | -moz-osx-font-smoothing: grayscale; 28 | height:100%; 29 | } 30 | 31 | body { 32 | color: #000; 33 | background-color: #fff; 34 | font-size: 16px; 35 | font-family: "Helvetica", "Helvetica Neue", "Verdana", "sans-serif", "Arial", "Ubuntu", "PingFang SC", 36 | "Microsoft YaHei"; 37 | margin: 0; 38 | padding: 0; 39 | line-height: 1.5; 40 | // touch-action: none; //禁止手机滚动 41 | // min-width: 1280px; 42 | height:100%; 43 | } 44 | #__nuxt, 45 | #__layout{ 46 | height:100%; 47 | } 48 | html, 49 | body, 50 | div, 51 | span, 52 | applet, 53 | object, 54 | iframe, 55 | h1, 56 | h2, 57 | h3, 58 | h4, 59 | h5, 60 | h6, 61 | p, 62 | blockquote, 63 | pre, 64 | a, 65 | abbr, 66 | acronym, 67 | address, 68 | big, 69 | cite, 70 | code, 71 | del, 72 | dfn, 73 | em, 74 | img, 75 | ins, 76 | kbd, 77 | q, 78 | s, 79 | samp, 80 | small, 81 | strike, 82 | strong, 83 | sub, 84 | sup, 85 | tt, 86 | var, 87 | b, 88 | u, 89 | i, 90 | center, 91 | dl, 92 | dt, 93 | dd, 94 | ol, 95 | ul, 96 | li, 97 | fieldset, 98 | form, 99 | label, 100 | legend, 101 | table, 102 | caption, 103 | tbody, 104 | tfoot, 105 | thead, 106 | tr, 107 | th, 108 | td, 109 | article, 110 | aside, 111 | canvas, 112 | details, 113 | embed, 114 | figure, 115 | figcaption, 116 | footer, 117 | header, 118 | hgroup, 119 | menu, 120 | nav, 121 | output, 122 | ruby, 123 | section, 124 | summary, 125 | time, 126 | mark, 127 | audio, 128 | video { 129 | margin: 0; 130 | padding: 0; 131 | border: 0; 132 | font-weight: 400; 133 | font-size: 16px; 134 | font-family: inherit; 135 | color: #777; 136 | } 137 | 138 | button { 139 | border: none; 140 | background: none; 141 | } 142 | input { 143 | border-radius: 0; 144 | border: 1px solid #eee; 145 | outline: none; 146 | -webkit-appearance: none; 147 | } 148 | input:focus, 149 | button:focus { 150 | outline: none; 151 | } 152 | 153 | ::selection { 154 | background-color: #333; 155 | color: #fff; 156 | } 157 | a { 158 | text-decoration: none; 159 | outline: none; 160 | color: #777; 161 | } 162 | 163 | // 去除默认样式 164 | .el-main, 165 | .el-footer, 166 | .el-header { 167 | padding: 0; 168 | } 169 | 170 | /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 171 | ::-webkit-scrollbar { 172 | width: 7px; 173 | height: 7px; 174 | background-color:#f2f2f2; 175 | } 176 | /*定义滚动条轨道 内阴影+圆角*/ 177 | ::-webkit-scrollbar-track { 178 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 179 | border-radius: 10px; 180 | background-color: #fff; 181 | } 182 | /*定义滑块 内阴影+圆角*/ 183 | ::-webkit-scrollbar-thumb { 184 | border-radius: 10px; 185 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 186 | background-color: #cfcfcf; 187 | } 188 | /*滑块效果*/ 189 | ::-webkit-scrollbar-thumb:hover { 190 | border-radius: 5px; 191 | -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); 192 | background: rgba(0, 0, 0, 0.4); 193 | } 194 | -------------------------------------------------------------------------------- /assets/css/temp.scss: -------------------------------------------------------------------------------- 1 | // 临时存放css的文件 2 | // 主要是为了方便同时显示html和css 3 | -------------------------------------------------------------------------------- /assets/css/varibale.scss: -------------------------------------------------------------------------------- 1 | // 颜色，字体，背景的配置文件 2 | 3 | $color : #ff5387 4 | -------------------------------------------------------------------------------- /assets/font/demo.css: -------------------------------------------------------------------------------- 1 | /* Logo 字体 */ 2 | @font-face { 3 | font-family: "iconfont logo"; 4 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); 5 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), 6 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), 7 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), 8 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); 9 | } 10 | 11 | .logo { 12 | font-family: "iconfont logo"; 13 | font-size: 160px; 14 | font-style: normal; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | 19 | /* tabs */ 20 | .nav-tabs { 21 | position: relative; 22 | } 23 | 24 | .nav-tabs .nav-more { 25 | position: absolute; 26 | right: 0; 27 | bottom: 0; 28 | height: 42px; 29 | line-height: 42px; 30 | color: #666; 31 | } 32 | 33 | #tabs { 34 | border-bottom: 1px solid #eee; 35 | } 36 | 37 | #tabs li { 38 | cursor: pointer; 39 | width: 100px; 40 | height: 40px; 41 | line-height: 40px; 42 | text-align: center; 43 | font-size: 16px; 44 | border-bottom: 2px solid transparent; 45 | position: relative; 46 | z-index: 1; 47 | margin-bottom: -1px; 48 | color: #666; 49 | } 50 | 51 | 52 | #tabs .active { 53 | border-bottom-color: #f00; 54 | color: #222; 55 | } 56 | 57 | .tab-container .content { 58 | display: none; 59 | } 60 | 61 | /* 页面布局 */ 62 | .main { 63 | padding: 30px 100px; 64 | width: 960px; 65 | margin: 0 auto; 66 | } 67 | 68 | .main .logo { 69 | color: #333; 70 | text-align: left; 71 | margin-bottom: 30px; 72 | line-height: 1; 73 | height: 110px; 74 | margin-top: -50px; 75 | overflow: hidden; 76 | *zoom: 1; 77 | } 78 | 79 | .main .logo a { 80 | font-size: 160px; 81 | color: #333; 82 | } 83 | 84 | .helps { 85 | margin-top: 40px; 86 | } 87 | 88 | .helps pre { 89 | padding: 20px; 90 | margin: 10px 0; 91 | border: solid 1px #e7e1cd; 92 | background-color: #fffdef; 93 | overflow: auto; 94 | } 95 | 96 | .icon_lists { 97 | width: 100% !important; 98 | overflow: hidden; 99 | *zoom: 1; 100 | } 101 | 102 | .icon_lists li { 103 | width: 100px; 104 | margin-bottom: 10px; 105 | margin-right: 20px; 106 | text-align: center; 107 | list-style: none !important; 108 | cursor: default; 109 | } 110 | 111 | .icon_lists li .code-name { 112 | line-height: 1.2; 113 | } 114 | 115 | .icon_lists .icon { 116 | display: block; 117 | height: 100px; 118 | line-height: 100px; 119 | font-size: 42px; 120 | margin: 10px auto; 121 | color: #333; 122 | -webkit-transition: font-size 0.25s linear, width 0.25s linear; 123 | -moz-transition: font-size 0.25s linear, width 0.25s linear; 124 | transition: font-size 0.25s linear, width 0.25s linear; 125 | } 126 | 127 | .icon_lists .icon:hover { 128 | font-size: 100px; 129 | } 130 | 131 | .icon_lists .svg-icon { 132 | /* 通过设置 font-size 来改变图标大小 */ 133 | width: 1em; 134 | /* 图标和文字相邻时，垂直对齐 */ 135 | vertical-align: -0.15em; 136 | /* 通过设置 color 来改变 SVG 的颜色/fill */ 137 | fill: currentColor; 138 | /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 139 | normalize.css 中也包含这行 */ 140 | overflow: hidden; 141 | } 142 | 143 | .icon_lists li .name, 144 | .icon_lists li .code-name { 145 | color: #666; 146 | } 147 | 148 | /* markdown 样式 */ 149 | .markdown { 150 | color: #666; 151 | font-size: 14px; 152 | line-height: 1.8; 153 | } 154 | 155 | .highlight { 156 | line-height: 1.5; 157 | } 158 | 159 | .markdown img { 160 | vertical-align: middle; 161 | max-width: 100%; 162 | } 163 | 164 | .markdown h1 { 165 | color: #404040; 166 | font-weight: 500; 167 | line-height: 40px; 168 | margin-bottom: 24px; 169 | } 170 | 171 | .markdown h2, 172 | .markdown h3, 173 | .markdown h4, 174 | .markdown h5, 175 | .markdown h6 { 176 | color: #404040; 177 | margin: 1.6em 0 0.6em 0; 178 | font-weight: 500; 179 | clear: both; 180 | } 181 | 182 | .markdown h1 { 183 | font-size: 28px; 184 | } 185 | 186 | .markdown h2 { 187 | font-size: 22px; 188 | } 189 | 190 | .markdown h3 { 191 | font-size: 16px; 192 | } 193 | 194 | .markdown h4 { 195 | font-size: 14px; 196 | } 197 | 198 | .markdown h5 { 199 | font-size: 12px; 200 | } 201 | 202 | .markdown h6 { 203 | font-size: 12px; 204 | } 205 | 206 | .markdown hr { 207 | height: 1px; 208 | border: 0; 209 | background: #e9e9e9; 210 | margin: 16px 0; 211 | clear: both; 212 | } 213 | 214 | .markdown p { 215 | margin: 1em 0; 216 | } 217 | 218 | .markdown>p, 219 | .markdown>blockquote, 220 | .markdown>.highlight, 221 | .markdown>ol, 222 | .markdown>ul { 223 | width: 80%; 224 | } 225 | 226 | .markdown ul>li { 227 | list-style: circle; 228 | } 229 | 230 | .markdown>ul li, 231 | .markdown blockquote ul>li { 232 | margin-left: 20px; 233 | padding-left: 4px; 234 | } 235 | 236 | .markdown>ul li p, 237 | .markdown>ol li p { 238 | margin: 0.6em 0; 239 | } 240 | 241 | .markdown ol>li { 242 | list-style: decimal; 243 | } 244 | 245 | .markdown>ol li, 246 | .markdown blockquote ol>li { 247 | margin-left: 20px; 248 | padding-left: 4px; 249 | } 250 | 251 | .markdown code { 252 | margin: 0 3px; 253 | padding: 0 5px; 254 | background: #eee; 255 | border-radius: 3px; 256 | } 257 | 258 | .markdown strong, 259 | .markdown b { 260 | font-weight: 600; 261 | } 262 | 263 | .markdown>table { 264 | border-collapse: collapse; 265 | border-spacing: 0px; 266 | empty-cells: show; 267 | border: 1px solid #e9e9e9; 268 | width: 95%; 269 | margin-bottom: 24px; 270 | } 271 | 272 | .markdown>table th { 273 | white-space: nowrap; 274 | color: #333; 275 | font-weight: 600; 276 | } 277 | 278 | .markdown>table th, 279 | .markdown>table td { 280 | border: 1px solid #e9e9e9; 281 | padding: 8px 16px; 282 | text-align: left; 283 | } 284 | 285 | .markdown>table th { 286 | background: #F7F7F7; 287 | } 288 | 289 | .markdown blockquote { 290 | font-size: 90%; 291 | color: #999; 292 | border-left: 4px solid #e9e9e9; 293 | padding-left: 0.8em; 294 | margin: 1em 0; 295 | } 296 | 297 | .markdown blockquote p { 298 | margin: 0; 299 | } 300 | 301 | .markdown .anchor { 302 | opacity: 0; 303 | transition: opacity 0.3s ease; 304 | margin-left: 8px; 305 | } 306 | 307 | .markdown .waiting { 308 | color: #ccc; 309 | } 310 | 311 | .markdown h1:hover .anchor, 312 | .markdown h2:hover .anchor, 313 | .markdown h3:hover .anchor, 314 | .markdown h4:hover .anchor, 315 | .markdown h5:hover .anchor, 316 | .markdown h6:hover .anchor { 317 | opacity: 1; 318 | display: inline-block; 319 | } 320 | 321 | .markdown>br, 322 | .markdown>p>br { 323 | clear: both; 324 | } 325 | 326 | 327 | .hljs { 328 | display: block; 329 | background: white; 330 | padding: 0.5em; 331 | color: #333333; 332 | overflow-x: auto; 333 | } 334 | 335 | .hljs-comment, 336 | .hljs-meta { 337 | color: #969896; 338 | } 339 | 340 | .hljs-string, 341 | .hljs-variable, 342 | .hljs-template-variable, 343 | .hljs-strong, 344 | .hljs-emphasis, 345 | .hljs-quote { 346 | color: #df5000; 347 | } 348 | 349 | .hljs-keyword, 350 | .hljs-selector-tag, 351 | .hljs-type { 352 | color: #a71d5d; 353 | } 354 | 355 | .hljs-literal, 356 | .hljs-symbol, 357 | .hljs-bullet, 358 | .hljs-attribute { 359 | color: #0086b3; 360 | } 361 | 362 | .hljs-section, 363 | .hljs-name { 364 | color: #63a35c; 365 | } 366 | 367 | .hljs-tag { 368 | color: #333333; 369 | } 370 | 371 | .hljs-title, 372 | .hljs-attr, 373 | .hljs-selector-id, 374 | .hljs-selector-class, 375 | .hljs-selector-attr, 376 | .hljs-selector-pseudo { 377 | color: #795da3; 378 | } 379 | 380 | .hljs-addition { 381 | color: #55a532; 382 | background-color: #eaffea; 383 | } 384 | 385 | .hljs-deletion { 386 | color: #bd2c00; 387 | background-color: #ffecec; 388 | } 389 | 390 | .hljs-link { 391 | text-decoration: underline; 392 | } 393 | 394 | /* 代码高亮 */ 395 | /* PrismJS 1.15.0 396 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ 397 | /** 398 | * prism.js default theme for JavaScript, CSS and HTML 399 | * Based on dabblet (http://dabblet.com) 400 | * @author Lea Verou 401 | */ 402 | code[class*="language-"], 403 | pre[class*="language-"] { 404 | color: black; 405 | background: none; 406 | text-shadow: 0 1px white; 407 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 408 | text-align: left; 409 | white-space: pre; 410 | word-spacing: normal; 411 | word-break: normal; 412 | word-wrap: normal; 413 | line-height: 1.5; 414 | 415 | -moz-tab-size: 4; 416 | -o-tab-size: 4; 417 | tab-size: 4; 418 | 419 | -webkit-hyphens: none; 420 | -moz-hyphens: none; 421 | -ms-hyphens: none; 422 | hyphens: none; 423 | } 424 | 425 | pre[class*="language-"]::-moz-selection, 426 | pre[class*="language-"] ::-moz-selection, 427 | code[class*="language-"]::-moz-selection, 428 | code[class*="language-"] ::-moz-selection { 429 | text-shadow: none; 430 | background: #b3d4fc; 431 | } 432 | 433 | pre[class*="language-"]::selection, 434 | pre[class*="language-"] ::selection, 435 | code[class*="language-"]::selection, 436 | code[class*="language-"] ::selection { 437 | text-shadow: none; 438 | background: #b3d4fc; 439 | } 440 | 441 | @media print { 442 | 443 | code[class*="language-"], 444 | pre[class*="language-"] { 445 | text-shadow: none; 446 | } 447 | } 448 | 449 | /* Code blocks */ 450 | pre[class*="language-"] { 451 | padding: 1em; 452 | margin: .5em 0; 453 | overflow: auto; 454 | } 455 | 456 | :not(pre)>code[class*="language-"], 457 | pre[class*="language-"] { 458 | background: #f5f2f0; 459 | } 460 | 461 | /* Inline code */ 462 | :not(pre)>code[class*="language-"] { 463 | padding: .1em; 464 | border-radius: .3em; 465 | white-space: normal; 466 | } 467 | 468 | .token.comment, 469 | .token.prolog, 470 | .token.doctype, 471 | .token.cdata { 472 | color: slategray; 473 | } 474 | 475 | .token.punctuation { 476 | color: #999; 477 | } 478 | 479 | .namespace { 480 | opacity: .7; 481 | } 482 | 483 | .token.property, 484 | .token.tag, 485 | .token.boolean, 486 | .token.number, 487 | .token.constant, 488 | .token.symbol, 489 | .token.deleted { 490 | color: #905; 491 | } 492 | 493 | .token.selector, 494 | .token.attr-name, 495 | .token.string, 496 | .token.char, 497 | .token.builtin, 498 | .token.inserted { 499 | color: #690; 500 | } 501 | 502 | .token.operator, 503 | .token.entity, 504 | .token.url, 505 | .language-css .token.string, 506 | .style .token.string { 507 | color: #9a6e3a; 508 | background: hsla(0, 0%, 100%, .5); 509 | } 510 | 511 | .token.atrule, 512 | .token.attr-value, 513 | .token.keyword { 514 | color: #07a; 515 | } 516 | 517 | .token.function, 518 | .token.class-name { 519 | color: #DD4A68; 520 | } 521 | 522 | .token.regex, 523 | .token.important, 524 | .token.variable { 525 | color: #e90; 526 | } 527 | 528 | .token.important, 529 | .token.bold { 530 | font-weight: bold; 531 | } 532 | 533 | .token.italic { 534 | font-style: italic; 535 | } 536 | 537 | .token.entity { 538 | cursor: help; 539 | } 540 | -------------------------------------------------------------------------------- /assets/font/demo_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IconFont Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

19 |
20 | 25 | 26 | 查看项目 27 | 28 |
29 |
30 |
31 |
    32 | 33 |
  • 34 | 35 |
    安卓
    36 |
    
    37 |
    • 38 | 39 |
  • 40 | 41 |
    苹果
    42 |
    
    43 |
    • 44 | 45 |
  • 46 | 47 |
    关闭
    48 |
    
    49 |
    • 50 | 51 |
  • 52 | 53 |
    微信
    54 |
    
    55 |
    • 56 | 57 |
58 |
59 |

Unicode 引用

60 |
61 | 62 |

Unicode 是字体在网页端最原始的应用方式，特点是：

63 |
    64 |
  • 兼容性最好，支持 IE6+，及所有现代浏览器。
    • 65 |
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • 66 |
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
    • 67 |
68 |
69 |

注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

70 |
71 |

Unicode 使用步骤如下：

72 |

第一步：拷贝项目下面生成的 @font-face

73 | 
@font-face {
 75 |   font-family: 'iconfont';
 76 |   src: url('iconfont.eot');
 77 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
 78 |       url('iconfont.woff2') format('woff2'),
 79 |       url('iconfont.woff') format('woff'),
 80 |       url('iconfont.ttf') format('truetype'),
 81 |       url('iconfont.svg#iconfont') format('svg');
 82 | }
 83 |
84 |

第二步：定义使用 iconfont 的样式

85 | 
.iconfont {
 87 |   font-family: "iconfont" !important;
 88 |   font-size: 16px;
 89 |   font-style: normal;
 90 |   -webkit-font-smoothing: antialiased;
 91 |   -moz-osx-font-smoothing: grayscale;
 92 | }
 93 |
94 |

第三步：挑选相应图标并获取字体编码，应用于页面

95 | 
 96 | <span class="iconfont">&#x33;</span>
 98 |
99 |
100 |

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

101 |
102 |
103 |
104 |
105 |
    106 | 107 |
  • 108 | 109 |
    110 | 安卓 111 |
    112 |
    .icon-anzhuo 113 |
    114 |
    • 115 | 116 |
  • 117 | 118 |
    119 | 苹果 120 |
    121 |
    .icon-iconfontapple 122 |
    123 |
    • 124 | 125 |
  • 126 | 127 |
    128 | 关闭 129 |
    130 |
    .icon-guanbi 131 |
    132 |
    • 133 | 134 |
  • 135 | 136 |
    137 | 微信 138 |
    139 |
    .icon-weixin 140 |
    141 |
    • 142 | 143 |
144 |
145 |

font-class 引用

146 |
147 | 148 |

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

149 |

与 Unicode 使用方式相比，具有如下特点：

150 |
    151 |
  • 兼容性良好，支持 IE8+，及所有现代浏览器。
    • 152 |
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • 153 |
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • 154 |
  • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
    • 155 |
156 |

使用步骤如下：

157 |

第一步：引入项目下面生成的 fontclass 代码：

158 | 
<link rel="stylesheet" href="./iconfont.css">
159 |
160 |

第二步：挑选相应图标并获取类名，应用于页面：

161 | 
<span class="iconfont icon-xxx"></span>
162 |
163 |
164 |

" 165 | iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

166 |
167 |
168 |
169 |
170 |
    171 | 172 |
  • 173 | 176 |
    安卓
    177 |
    #icon-anzhuo
    178 |
    • 179 | 180 |
  • 181 | 184 |
    苹果
    185 |
    #icon-iconfontapple
    186 |
    • 187 | 188 |
  • 189 | 192 |
    关闭
    193 |
    #icon-guanbi
    194 |
    • 195 | 196 |
  • 197 | 200 |
    微信
    201 |
    #icon-weixin
    202 |
    • 203 | 204 |
205 |
206 |

Symbol 引用

207 |
208 | 209 |

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 210 | 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

211 |
    212 |
  • 支持多色图标了，不再受单色限制。
    • 213 |
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • 214 |
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • 215 |
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • 216 |
217 |

使用步骤如下：

218 |

第一步：引入项目下面生成的 symbol 代码：

219 | 
<script src="./iconfont.js"></script>
220 |
221 |

第二步：加入通用 CSS 代码（引入一次就行）：

222 | 
<style>
223 | .icon {
224 |   width: 1em;
225 |   height: 1em;
226 |   vertical-align: -0.15em;
227 |   fill: currentColor;
228 |   overflow: hidden;
229 | }
230 | </style>
231 |
232 |

第三步：挑选相应图标并获取类名，应用于页面：

233 | 
<svg class="icon" aria-hidden="true">
234 |   <use xlink:href="#icon-xxx"></use>
235 | </svg>
236 |
237 |
238 |
239 | 240 |
241 |
242 | 261 | 262 | 263 | -------------------------------------------------------------------------------- /assets/font/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face {font-family: "iconfont"; 2 | src: url('iconfont.eot?t=1563008758917'); /* IE9 */ 3 | src: url('iconfont.eot?t=1563008758917#iefix') format('embedded-opentype'), /* IE6-IE8 */ 4 | url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAS4AAsAAAAACWgAAARqAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqFfIR9ATYCJAMUCwwABCAFhG0HUhsTCBFVnC3JfkhSQQIAAAUUAGDCLPDkDD9hAyAAAv38e/rnJnU62sEEtN2cPUj4C0H92G/v2VdpgllkqB4yyTuJ1miJkgmZ/aZ71lQIE4maEjvlWL4j1+7cS1OW2k6jFAgHwn37/zjca/M8sPksy2XuZQEmmIVjjPO2FWhfHP8ink0G/xN4HCBAYguOgJ6iE0kQKdRxCEBfVRVFIIoolQIc0pW0jKVFhKYDXzeNY5cBYJrz9+gf3JEIYGoGdWpqeVQphL41ezsdl3EyuZYaZnWnBwB2FcABRwDggb4zjbWAe0FHwPVlP88dgOLvSlJX3Rzfer6dznEAd0HivvYPD+CKJEANVKEUsaEC3saxDArAeevIzBJ5ghwwEE0H9rEI+dYSCaABAB8B0A2oYkNHKNlsWQu8o1Qs1teUIhslqY5YrCaRkBrdDbIN7CYDtHDjxHqg581j58hmT8yl5W5y5oINBAE/+VyHZl6OcGnJyrvxzLy5muTBCV967mwt6vxt08wF3UzT7eo5EXebvC2ZiL844Xve/saHSH6PYM9YbdjDnru2j2CTNjgdtj0OsuzDlrNXW967x2iB7HYPXVpOlpVSFWVMeQdrdfcuffs2eecORTJ7zhCszlJ07x7NbpCtn9go30SuRUZI2lSmYN05G4q+dq84T66zRpIS3sGuMeF+qU4bn+l8c3kmuC986vJV99ReyVcdzXyNIGBOI4d1qLt2Cp65fBN0kg7i2TVcNTo02DevzJlwJsshNHpvlHP4i9oXjuH0Om/H0KwIhpl0Lf1p94VfXZ4K3eT7wTP18cI0nRj35OT2JEOFR/JrzDR3h/fcibFtFdrdV39M6tXItunEzL31731yZ2T8quWuD2f+doOsHEWlbpDUyiIbQn7BgIroZ5uCAYOB74DdlupIv/7C5Biaj13ejA9CfHxXpItFbX+I4KCZ+vdVtljX5hXBpVqddh32/+z+v8tOtbawH7Mb/WuON+yY1YcNYptnYQ0aDWjetsur1hZ76Wd1RVXNrVamDMnroa2GbTuVCCJy5pDhMFQCAPfh6ooa9p34L3kN3u2EfzzIB2/Teezzx0cKVAL/+LtEAX/zY//AaubEZbwSIpVZ705VaXMfyozjqIpaJHoB02EbQwWqFzXuAPs1qXljrHO/bqSruxEOXasAko4NZF1HyIK9gmrgGpquW+i7NFs9sMDyovRw4UkgTL0gGfuFbOqNLNgvVGt/0EwDh77naG05cBJVklEzGoI2mCfwLIqVrpGam7lCJw0NDnMc/A458TzQd3aNR2YYI3cxI9k7AxEFiimCKTkNw5BAM/loSccV0cOuS3nWlToWRZmaRwwZBLIB0wnwWEhMWe1FLfH7FeRIhQxc0FCm3kEs4XUO+jp6FZAzYVyp4VR6J/YcA0IoapTCSARMQY9CLUiAzh7kQxbR4Tbwa0NdbKWqCjvDi6NzzPpwm6pn1UiRo0SNpn3Wn92Umjuwn6F1iCWnzYhNr3Qo845enMkAAAA=') format('woff2'), 5 | url('iconfont.woff?t=1563008758917') format('woff'), 6 | url('iconfont.ttf?t=1563008758917') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ 7 | url('iconfont.svg?t=1563008758917#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family: "iconfont" !important; 12 | font-size: 16px; 13 | font-style: normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-anzhuo:before { 19 | content: "\e690"; 20 | } 21 | 22 | .icon-iconfontapple:before { 23 | content: "\e634"; 24 | } 25 | 26 | .icon-guanbi:before { 27 | content: "\e621"; 28 | } 29 | 30 | .icon-weixin:before { 31 | content: "\e62c"; 32 | } 33 | 34 | -------------------------------------------------------------------------------- /assets/font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/font/iconfont.eot -------------------------------------------------------------------------------- /assets/font/iconfont.js: -------------------------------------------------------------------------------- 1 | !function(d){var t,n='',e=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss");if(e&&!d.__iconfont__svg__cssinject__){d.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}!function(t){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(t,0);else{var e=function(){document.removeEventListener("DOMContentLoaded",e,!1),t()};document.addEventListener("DOMContentLoaded",e,!1)}else document.attachEvent&&(o=t,c=d.document,i=!1,(a=function(){try{c.documentElement.doScroll("left")}catch(t){return void setTimeout(a,50)}n()})(),c.onreadystatechange=function(){"complete"==c.readyState&&(c.onreadystatechange=null,n())});function n(){i||(i=!0,o())}var o,c,i,a}(function(){var t,e;(t=document.createElement("div")).innerHTML=n,n=null,(e=t.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",function(t,e){e.firstChild?function(t,e){e.parentNode.insertBefore(t,e)}(t,e.firstChild):e.appendChild(t)}(e,document.body))})}(window); -------------------------------------------------------------------------------- /assets/font/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /assets/font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/font/iconfont.ttf -------------------------------------------------------------------------------- /assets/font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/font/iconfont.woff -------------------------------------------------------------------------------- /assets/font/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/font/iconfont.woff2 -------------------------------------------------------------------------------- /assets/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/img/1.png -------------------------------------------------------------------------------- /assets/img/12_12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/img/12_12.jpg -------------------------------------------------------------------------------- /assets/img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/img/2.png -------------------------------------------------------------------------------- /assets/img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/img/3.png -------------------------------------------------------------------------------- /assets/img/8_8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/img/8_8.jpg -------------------------------------------------------------------------------- /assets/img/about.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/img/about.png -------------------------------------------------------------------------------- /assets/img/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/img/arrow.png -------------------------------------------------------------------------------- /assets/img/arrow1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/img/arrow1.png -------------------------------------------------------------------------------- /assets/img/beianico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/img/beianico.png -------------------------------------------------------------------------------- /assets/img/ellipse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/img/ellipse.png -------------------------------------------------------------------------------- /assets/img/feedback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/img/feedback.png -------------------------------------------------------------------------------- /assets/img/green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/img/green.png -------------------------------------------------------------------------------- /assets/img/home1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/img/home1.png -------------------------------------------------------------------------------- /assets/img/link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/img/link.png -------------------------------------------------------------------------------- /assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/img/logo.png -------------------------------------------------------------------------------- /assets/img/look.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/img/look.png -------------------------------------------------------------------------------- /assets/img/news.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/img/news.png -------------------------------------------------------------------------------- /assets/img/phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/img/phone.png -------------------------------------------------------------------------------- /assets/img/pink.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/img/pink.png -------------------------------------------------------------------------------- /assets/img/serBG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/img/serBG.png -------------------------------------------------------------------------------- /assets/img/show.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/img/show.png -------------------------------------------------------------------------------- /assets/testimg/1563520246158上传的图片.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/testimg/1563520246158上传的图片.jpg -------------------------------------------------------------------------------- /assets/testimg/1563520312322上传的图片.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/assets/testimg/1563520312322上传的图片.jpg -------------------------------------------------------------------------------- /base64.js: -------------------------------------------------------------------------------- 1 | function previewImage(file) { 2 | var target = file.name; 3 | if (file.files && file.files[0]) { 4 | var reader = new FileReader(); 5 | reader.onload = function (evt) { 6 | console.log(evt.target.result)//即图片，此处可进行预览操作 7 | } 8 | return reader.readAsDataURL(file.files[0]); 9 | } 10 | } -------------------------------------------------------------------------------- /components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /components/home/bottom.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 84 | -------------------------------------------------------------------------------- /components/home/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /components/home/top.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 65 | 66 | 184 | -------------------------------------------------------------------------------- /components/public/footer/index.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 83 | -------------------------------------------------------------------------------- /components/public/header/index.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 31 | 32 | 33 | 43 | 44 | -------------------------------------------------------------------------------- /components/public/header/left-bar.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 25 | -------------------------------------------------------------------------------- /components/public/header/right-bar.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 50 | 51 | 52 | 102 | 103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /dbs/config.js: -------------------------------------------------------------------------------- 1 | export default({ 2 | 3 | dbs:"mongodb://127.0.0.1:27017/dbs" 4 | 5 | 6 | }) -------------------------------------------------------------------------------- /dbs/models/service.js: -------------------------------------------------------------------------------- 1 | import mongoose from "mongoose" 2 | 3 | // 文件名就是表名 4 | 5 | // 建表 创建mongodb模型 6 | let serviceScheam = new mongoose.Schema({ 7 | // 设计表结构 8 | suggest:String, 9 | number:Number, 10 | phone:Number, 11 | imgUrl:String, 12 | imgBase64:String 13 | }) 14 | 15 | 16 | // 生成model 17 | 18 | export default mongoose.model("service", serviceScheam) -------------------------------------------------------------------------------- /layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 30 | 41 | -------------------------------------------------------------------------------- /layouts/error.vue: -------------------------------------------------------------------------------- 1 | 8 | 25 | -------------------------------------------------------------------------------- /layouts/none.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /md/img-base64.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 14 | 15 | 16 | 30 | 31 | -------------------------------------------------------------------------------- /md/mongoose笔记.md: -------------------------------------------------------------------------------- 1 | # mongoose 学习笔记 2 | 3 | ## 非关系型数据库 4 | 5 | [下载 MongoDB](https://www.mongodb.com/download-center#community) 6 | 7 | [linux安装mongodb4.X](https://blog.csdn.net/ysk_xh_521/article/details/83275101) 8 | 9 | [下载 Robo 3T](https://studio3t.com/download-now/) 10 | 11 | [MongooseJS中文文档](https://xiaoxiami.gitbook.io/mongoose/guide) 12 | 13 | [配置MongoDB](https://blog.csdn.net/qq_20412595/article/details/80610724) 14 | 15 | ``` bash 16 | 17 | # 查看 mongodb 安装的位置 18 | $ which mongod 19 | 20 | # 21 | mongod --dbpath E:\DB\data\db 22 | 23 | # 把mongod配置成服务 24 | mongod --config "E:\DB\data\mongo.config" --install --serviceName "MongoDB" 25 | # 启动 mongodb 26 | $ mongod 27 | 28 | # 安装 mongoose 29 | $ npm i mongoose 30 | 31 | 32 | ``` 33 | 34 | ``` javascript 35 | // mongoose 操作数据库 36 | 37 | // dbs:"mongodb://127.0.0.1:27017/dbs" 38 | 39 | // 链接 MongoDB 40 | mongoose.connect("mongodb://127.0.0.1:27017/dbs",{ 41 | useNewUrlParser: true 42 | }) 43 | 44 | // 建数据库 45 | import mongoose from 'mongoose' 46 | let personSchema = new mongoose.Schema({ 47 | // 建库 48 | name : String, 49 | age : Number 50 | }) 51 | 52 | export default mongoose.model("Person",personSchema) 53 | 54 | ``` 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /md/nuxt问题总结.md: -------------------------------------------------------------------------------- 1 | 1. 为什么查看网页源代码是乱的？ 2 | 3 | -------------------------------------------------------------------------------- /md/redis笔记.md: -------------------------------------------------------------------------------- 1 | # Redis 学习笔记 2 | 3 | [下载redis](https://github.com/microsoftarchive/redis/releases) 4 | 5 | [安装使用教程](https://www.runoob.com/redis/redis-install.html) 6 | ### 存储seesion 7 | 8 | ``` javascript 9 | 10 | // redis的使用 11 | // 启动redis 12 | redis-server 13 | 14 | 15 | // 使用和连接redis 16 | // 安装中间件 17 | // koa-generic-session 操作session 18 | // koa-redis 连接redis 19 | cnpm install koa-generic-session koa-redis 20 | 21 | // 加密处理 22 | app.key=["keys","keyskeys"] // 随便写个 23 | app.use(session({ 24 | key:"mt", 25 | prefix:"mtpr", //session NAME 26 | store:new Redis() // redis有默认值，默认端口 27 | })) 28 | 29 | 30 | ctx.session.count ++ 31 | 32 | // 查看redis数据 33 | redis-cli //启动客户端程序 控制台命令行 34 | keys * // 查看存储得值 *代表所有keys 35 | get [key值] //获取值 36 | 37 | ``` -------------------------------------------------------------------------------- /md/ssl签发笔记.md: -------------------------------------------------------------------------------- 1 | # SSL签发笔记 HTTP改为HTTPS协议 2 | 3 | [签发作者GitHub - acne.sh](https://github.com/Neilpang/acme.sh) 4 | 5 | 6 | ## SSL 签发 nginx转发固定配置 7 | ``` bash 8 | server { 9 | listen 80; 10 | listen 443 ssl http2; 11 | listen [::]:443 ssl http2; 12 | server_name hdouji.com; 13 | ssl on; 14 | ssl_certificate "cert/hdouji.com.cer"; 15 | ssl_certificate_key "cert/hdouji.com.key"; 16 | ssl_session_cache shared:SSL:1m; 17 | ssl_session_timeout 10m; 18 | ssl_ciphers HIGH:!aNULL:!MD5; 19 | ssl_prefer_server_ciphers on; 20 | 21 | location / { 22 | proxy_pass http://localhost:8080; 23 | } 24 | error_page 404 /404.html; 25 | location = /40x.html { 26 | } 27 | error_page 500 502 503 504 /50x.html; 28 | location = /50x.html { 29 | } 30 | if ($scheme != https) { 31 | rewrite ^/(.*) https://$server_name/$1 permanent; 32 | } 33 | } 34 | 35 | 36 | ``` -------------------------------------------------------------------------------- /md/学习笔记.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | nuxtJS + koa2 + ssr + vue美团项目 8 | 9 | 10 | 11 |

项目安装

12 |

1. npm install -g npx

13 |

2. npx create-nuxt-app project-name

14 |

3. npm install --update-binary 重新编译一下，防止出错

15 | 16 |

使用脚手架创建项目的一些常见错误

17 | 35 |
36 | 40 | 41 |
42 | 46 | 47 |
48 |
49 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /md/学习笔记.md: -------------------------------------------------------------------------------- 1 | ## nuxt koa2 学习笔记 2 | 3 | [nuxt简书教程](https://www.jianshu.com/p/840169ba92e6) 4 | 5 | # 安裝使用的模块 6 | ``` bash 7 | # 缓存清理 8 | npm cache clean --force 9 | # 删除package.lock.json 10 | 11 | # 安装 所需要模块 12 | cnpm install 13 | 14 | # 安装 es2015 15 | cnpm install babel-preset-es2015 16 | 17 | # 安装 babel 18 | cnpm install --save-dev babel-cli 19 | 20 | # 安装 scss 21 | cnpm install sass-loader node-sass 22 | 23 | 24 | # 安装mongoose 25 | cnpm install mongoose 26 | 27 | # 安装路由 28 | cnpm install koa-router 29 | 30 | # 安装Redis 分布式管理 31 | cnpm install koa-redis 32 | 33 | # 安装nodeMailer操作邮箱 34 | cnpm install nodemailer 35 | 36 | # shell 发送请求 37 | # curl shell命令 -d是post请求 38 | curl -d 'xx=xx' http://xxx.com/post 39 | ``` 40 | 41 | # 用户接口设计 42 | 43 | ``` bash 44 | #注册接口 45 | /users/signup 46 | 47 | #登录接口 48 | /users/signin 49 | 50 | #验证接口 51 | /users/verify 52 | 53 | #获取用户信息 54 | /users/getUser 55 | 56 | ``` 57 | 58 | ## 文件目录注释 59 | -------------------------------------------------------------------------------- /md/安装选项图.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/md/安装选项图.png -------------------------------------------------------------------------------- /md/让koa、nuxt等node项目使用ES6.md: -------------------------------------------------------------------------------- 1 | # 让koa、nuxt等node项目使用ES6 2 | 3 | 4 | 一、 安装babel-cli、babel-preset-env 5 | ``` bash 6 | npm i babel-cli babel-preset-env -D 7 | ``` 8 | 二、 配置babel 9 | 10 | > 根目录下新建 .babelre 文件，文件内容如下 11 | ``` bash 12 | { 13 | "presets": ["env"] 14 | } 15 | ``` 16 | 17 | 三、在package.json文件的script中修改启动命令(以nuxt项目为例)，添加"--exec babel-node" 18 | 19 | ``` json 20 | "scripts": { 21 | "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node", 22 | "build": "nuxt build", 23 | "start": "cross-env NODE_ENV=production node server/index.js --exec babel-node", 24 | "generate": "nuxt generate" 25 | }, 26 | 27 | ``` -------------------------------------------------------------------------------- /md/部署nuxt-koa2遇到的坑.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | pm2 start npm --name "hongdouji" -- run start -i max 启动 -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = { 3 | metaInfo: { 4 | htmlAttrs: { 5 | lang: 'zh', 6 | amp: true 7 | }, 8 | bodyAttrs: { 9 | class: ['dark-mode', 'mobile'] 10 | } 11 | }, 12 | mode: 'universal', 13 | /* 14 | ** Headers of the page 15 | */ 16 | head: { 17 | title: "红豆记 - 情侣服务平台 官网", 18 | meta: [ 19 | { charset: 'utf-8' }, 20 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 21 | { name: 'keywords', content: "红豆记,红豆记恋爱记录,情侣必备软件,情侣恋爱神器,爱情银行,我爱你保险基金,小恩爱,微爱,情侣空间,恋人清单,异地恋,印书记录,闹钟,相册,纪念日,情感求助咨询,存钱,头像,礼物,红豆记app" }, 22 | { hid: 'description', name: 'description', content: "红豆记服务于上千万情侣用户，是一个分享与记录生活的平台，在红豆记里，用户以图文，视频等形式记录二人生活的点滴。情侣分享的内容涵盖旅行、健身、时尚、美食、影视等各个生活领域。" }, 23 | ], 24 | link: [ 25 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 26 | ] 27 | }, 28 | 29 | /* 30 | ** 页面js按需加载 31 | */ 32 | render: { 33 | resourceHints: false, 34 | }, 35 | /* 36 | ** Customize the progress-bar color 37 | */ 38 | loading: { color: '#fff' }, 39 | server: { 40 | port: 8080, // default: 3000 41 | host: '0.0.0.0', // default: localhost 42 | open:true // 自动打开浏览器 43 | }, 44 | /* 45 | ** Global CSS 46 | */ 47 | css: [ 48 | 'element-ui/lib/theme-chalk/index.css', 49 | '@/assets/css/base.scss', // 全局的基础样式 50 | '@/assets/css/varibale.scss', // 全局的颜色配置 51 | '@/assets/font/iconfont.css' // 字体图标的样式 52 | ], 53 | /* 54 | ** Plugins to load before mounting the App 55 | */ 56 | plugins: [ 57 | '@/plugins/element-ui', 58 | { src: '@/plugins/vue-mavon-editor', srr: false } 59 | 60 | ], 61 | /* 62 | ** Nuxt.js modules 63 | */ 64 | 65 | 66 | // modules: [ 67 | // '@nuxtjs/axios', 68 | // ], 69 | // axios: { 70 | // prefix: '/api/', // 下次一次性更新基础接口地址 71 | // proxy: true // Can be also an object with default options 72 | // }, 73 | 74 | // proxy: { 75 | // '/api/': { target: 'http://localhost:8080', pathRewrite: { '^/api/': '' } } 76 | // }, 77 | 78 | 79 | /* 80 | ** Build configuration 81 | */ 82 | build: { 83 | transpile: [/^element-ui/], 84 | /* 85 | ** You can extend webpack config here 86 | */ 87 | extend(config, ctx) { 88 | } 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hdouji", 3 | "version": "1.0.0", 4 | "description": "红豆记,红豆记恋爱记录,情侣必备软件,情侣恋爱神器", 5 | "author": "GhostCat", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node", 9 | "build": "nuxt build", 10 | "start": "cross-env NODE_ENV=production nodemon server/index.js --exec babel-node", 11 | "prd": "pm2 start npm --name 'hongdouji' -- run start -i max", 12 | "generate": "nuxt generate" 13 | }, 14 | "dependencies": { 15 | "axios": "^0.19.0", 16 | "babel-cli": "^6.26.0", 17 | "babel-preset-env": "^1.7.0", 18 | "cross-env": "^5.2.0", 19 | "element-ui": "^2.4.11", 20 | "koa": "^2.6.2", 21 | "koa-bodyparser": "^4.2.1", 22 | "koa-multer": "^1.0.2", 23 | "koa-router": "^7.4.0", 24 | "koa2-cors": "^2.0.6", 25 | "mavon-editor": "^2.7.5", 26 | "mongoose": "^5.6.5", 27 | "node-sass": "^4.12.0", 28 | "nuxt": "^2.0.0", 29 | "sass-loader": "^7.1.0" 30 | }, 31 | "devDependencies": { 32 | "babel-cli": "^6.26.0", 33 | "babel-preset-env": "^1.7.0", 34 | "koa-bodyparser": "^4.2.1", 35 | "nodemon": "^1.18.9" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /pages/about.vue: -------------------------------------------------------------------------------- 1 | 37 | 114 | 115 | 116 | 119 | -------------------------------------------------------------------------------- /pages/admin.vue: -------------------------------------------------------------------------------- 1 | 19 | 32 | 59 | -------------------------------------------------------------------------------- /pages/edit.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /pages/news/_id.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /pages/news/index.vue: -------------------------------------------------------------------------------- 1 | 44 | 95 | -------------------------------------------------------------------------------- /pages/privacy.vue: -------------------------------------------------------------------------------- 1 | 537 | 538 | 539 | 550 | 551 | -------------------------------------------------------------------------------- /pages/service.vue: -------------------------------------------------------------------------------- 1 | 79 | 80 | 177 | 178 | 386 | -------------------------------------------------------------------------------- /pages/terms.vue: -------------------------------------------------------------------------------- 1 | 72 | 73 | 74 | 167 | 168 | -------------------------------------------------------------------------------- /plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /plugins/element-ui.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Element from 'element-ui' 3 | import locale from 'element-ui/lib/locale/lang/en' 4 | 5 | Vue.use(Element, { locale }) 6 | -------------------------------------------------------------------------------- /plugins/vue-mavon-editor.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import mavonEditor from 'mavon-editor'; 3 | import 'mavon-editor/dist/css/index.css'; 4 | 5 | // markdown 插件 6 | 7 | Vue.use(mavonEditor); -------------------------------------------------------------------------------- /server/index.js: -------------------------------------------------------------------------------- 1 | const Koa = require('koa') 2 | const consola = require('consola') 3 | const { Nuxt, Builder } = require('nuxt') 4 | const router = require("koa-router")()// 导入路由中间间 5 | const bodyParser = require('koa-bodyparser')// 接收post请求处理参数 6 | const service = require("./service")// 导入客服接口 7 | import mongoose from 'mongoose' // 导入mongoose 8 | import dbConfig from "../dbs/config" // 导入mongoose配置 9 | import cors from "koa2-cors" // 导入cors 配置跨域 10 | const config = require('../nuxt.config.js') 11 | 12 | const app = new Koa() 13 | app.use(cors()) // 注入跨域 14 | app.use(bodyParser()) // 注入post解析参数 15 | app.use(service.routes(), service.allowedMethods())// 注入路由 16 | 17 | mongoose.connect(dbConfig.dbs, { 18 | useNewUrlParser: true // 写死就行，不知道啥意思 19 | }) // 连接数据库 20 | 21 | 22 | 23 | 24 | // Import and Set Nuxt.js options 25 | config.dev = !(app.env === 'production') 26 | 27 | async function start() { 28 | // Instantiate nuxt.js 29 | const nuxt = new Nuxt(config) 30 | 31 | const { 32 | host = process.env.HOST || 'http://localhost', 33 | port = process.env.PORT || 8080 34 | } = nuxt.options.server 35 | 36 | 37 | 38 | // Build in development 39 | if (config.dev) { 40 | const builder = new Builder(nuxt) 41 | await builder.build() 42 | } else { 43 | await nuxt.ready() 44 | } 45 | 46 | app.use((ctx) => { 47 | ctx.status = 200 48 | ctx.respond = false // Bypass Koa's built-in response handling 49 | ctx.req.ctx = ctx // This might be useful later on, e.g. in nuxtServerInit or with nuxt-stash 50 | nuxt.render(ctx.req, ctx.res) 51 | }) 52 | 53 | 54 | app.listen(port, host) 55 | // 暂时没有解决办法的设置host和port 服务器上使用这套 56 | // app.listen(8080, "0.0.0.0") 57 | 58 | consola.ready({ 59 | message: `Server listening on http://${host}:${port}`, 60 | badge: true 61 | }) 62 | } 63 | 64 | start() 65 | -------------------------------------------------------------------------------- /server/service.js: -------------------------------------------------------------------------------- 1 | // 本文件是客服页面接口 2 | 3 | const router = require("koa-router")() 4 | const bodyParser = require("koa-bodyparser") 5 | 6 | import Service from '../dbs/models/service' // 引入db模型 7 | // import { userInfo } from 'os'; 8 | 9 | import mongoose from "mongoose" 10 | 11 | 12 | 13 | // 上传图片路由功能 14 | // 上传图片的功能等待更新为 base64 15 | let imgUrl 16 | const multer = require('koa-multer');//加载koa-multer模块 17 | // 文件上传 18 | // koa-multer配置 19 | var storage = multer.diskStorage({ 20 | //文件保存路径 21 | destination: function (req, file, cb) { 22 | cb(null, 'assets/testimg') 23 | }, 24 | //修改文件名称 25 | filename: function (req, file, cb) { 26 | var fileFormat = (file.originalname).split("."); 27 | imgUrl = Date.now() + "上传的图片" + "." + fileFormat[fileFormat.length - 1] 28 | cb(null, imgUrl); 29 | } 30 | }) 31 | //加载配置 32 | var upload = multer({ storage: storage }); 33 | 34 | 35 | 36 | // 路由 37 | 38 | router.post('/upload/img', upload.single('file'), async (ctx, next) => { 39 | ctx.body = { 40 | filename: ctx.req.file.filename//返回文件名 41 | } 42 | }) 43 | 44 | 45 | router.post("/upload/json", async (ctx, next) => { 46 | console.log("外部访问json接口") 47 | let postParam = ctx.request.body 48 | postParam.imgUrl = imgUrl 49 | const service = new Service({ 50 | suggest: postParam.suggest, 51 | number: postParam.number, 52 | phone: postParam.phone, 53 | imgUrl: postParam.imgUrl, 54 | imgBase64:postParam.imgBase64 55 | }) 56 | let code 57 | try { 58 | await service.save() 59 | code = 0 60 | } catch (e) { 61 | code = -1 62 | } 63 | 64 | ctx.body = { 65 | code: code, 66 | data: postParam 67 | } 68 | }) 69 | 70 | 71 | router.get("/admin1", async (ctx, next) => { 72 | console.log("访问管理接口") 73 | var service = mongoose.model("service") 74 | await service.find((err, serviceScheam) => { 75 | ctx.response.body = serviceScheam 76 | }) 77 | }) 78 | 79 | router.get("/test", async (ctx, next) => { 80 | ctx.response.body = 'Hello, GhostCat' 81 | }) 82 | 83 | 84 | 85 | module.exports = router -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GhostCatcg/hongdouji/20992f7407a5d28823ec50c862aff68dedbfa2f7/static/favicon.ico -------------------------------------------------------------------------------- /store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | --------------------------------------------------------------------------------