美文网首页
vue服务端渲染项目(ssr)仿掘金、后台页面是react sp

vue服务端渲染项目(ssr)仿掘金、后台页面是react sp

作者: 青丶柠 | 来源:发表于2019-10-21 12:03 被阅读0次

    开源地址传送门: https://github.com/maoxiaoquan/kite

    kite

    前台演示网站地址: 小随笔https://www.xiaosuibi.com/

    后台演示网站地址: 小随笔https://www.xiaosuibi.com/_admin

    后台演示网站账户:kitetest 密码:q123456 (资源有点大,可能要加载一段时间)

    备注:因为项目是一直在写的,周期比较长,发出来的目的,就是希望大家多提建议,或者意见
    然后我再来改,代码方面我会一直优化的!!!!!!
    关于项目的维护,会一直维护下去的,我已经坚持了很久了,哈哈

    Build

    
    # npm install || cnpm install  安装所有的包,可能有些多,前台和后台是在一起的
    
    打包后台界面 npm run admin-build
    
    打包前台界面 npm run client-build
    
    

    Start

    
    # 目前用的数据库只有mysql 本地开发的话,下一个phpstudy即可
    
    初始化:npm run init 然后打开浏览器收入 localhost:8086 按照步骤操作即可
    
    然后可以选择pro or dev 开始
    
    pro 生产环境
    
    pro1.1 在cmd 中输入 npm run server 即可进入程序
    
    pro1.2 (url或者ip)+ :8086端口即可看到客户端主页
    
    pro1.3 (url或者ip)+ :8086/admin端口即可看到客户端后台页面
    
    dev 本地开发环境
    
    dev1.1 在cmd 中输入 npm run server-start 即可进开启接口服务
    
    dev1.2 在cmd 中输入 npm run admin-start 即可进入后台开发预览(地址为:localhost:8083)
    
    dev1.3 在cmd 中输入 npm run client-start 即可进入前台开发预览(地址为:localhost:8081)
    
    dev1.4 开发环境下 一定要先运行dev1.1的情况下再运行 dev1.2 或者 dev1.3
    
    目前cli部分代码写的比较乱,等后期有时间再继续优化,哈哈
    项目断断续续的写着,主体基本写完,目前就是优化和改bug,代码的逻辑啥的,能看则看,不能看就略过吧,也是自己学习的一个过程,
    放心这个代码会一直优化的,已经坚持了很久了,可以看提交,哈哈
    
    

    目录结构

    kite/
       |
       ├──admin/                     * 后台页面目录react
       |
       ├──client/                    * 前台ssr文件目录
       │   ├──build                  * vur ssr build 配置文件
       │   ├──config                 * 部分配置文件
       │   ├──public                 * index模版文件
       │   ├──request                * 请求配置文件
       │   ├──server                 * dev 模式下的开始文件
       │   ├──src                    * src ssr 主文件目录
       │   └──static                 * 静态资源目录
       │
       │──config/                    * 部分可配置文件
       │
       │──db/                        * mysql and lowdb
       |
       ├──server/                    * 服务层,所有前台后台接口
       │
       ├──static/                    * 静态资源目录
       |
       ├──views/                     * cli 模版目录
       │
       │──plugins/                   * 第三方组件 + 自有js库 + 其他插件性质的脚本
       │
       │──static/                    * 不经编译器处理的静态资源
       │
       │──store/                     * 全局数据状态管理
       │
       │──package.json               * 包信息
       │
       │──.eslintrc                  * Eslint配置
       │
       │──_nodemon.json              * _nodemon配置
       │
       │──.gitignore                 * Git忽略文件配置
       │
       └──pm2.json                   * pm2配置
    
    

    说明

    使用的技术栈:

    前台方面:vue + vuex + vue-router + vue-server-renderer

    后台方面:react + redux + react-redux + react-router

    server: koa + mysql

    公共部分:webpack

    其他详细的直接看 package.json 就可以了

    前台界面目前是用的 vue 的 ssr,但是没有采用 nuxt.js 代码的阅读应该还是可以的,cli 比较乱,后台界面采用的是 react

    前台目前比较简单,就是一个多人文章发布系统,用户可以注册账号,发布文章,关注用户,喜欢文章,评论等等

    后台管理文章的发布、审核,评论的审核,管理员权限管理,系统配置等等,前后台用户管理员独立

    初始化界面是对整个文章发布系统的一个初始化,包括初始管理员角色,mysql 等等

    LICENSE

    MIT

    相关文章

      网友评论

          本文标题:vue服务端渲染项目(ssr)仿掘金、后台页面是react sp

          本文链接:https://www.haomeiwen.com/subject/gdxcyctx.html