Vue2 + Koa2 实现后台管理系统

论坛 期权论坛     
选择匿名的用户   2021-5-23 19:56   901   0
<div class="blogpost-body" id="cnblogs_post_body">
<p>看了些 koa2 与 Vue2 的资料,模仿着做了一个基本的后台管理系统,包括增、删、改、查与图片上传。</p>
<p>工程目录:</p>
<p><img alt="" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-d6854a776eb0ccdcbb08b4ca6c6ef27c.png"></p>
<p>由于 <a href="http://koajs.com/" title="koajs.com">koa2</a> 用到了 async await 语法,所以 node 的版本需要至少 v7.6.0,我目前用的是 v7.9.0</p>
<p> </p>
<p>1. 根据 package.json 安装好依赖:</p>
<div class="cnblogs_code">
  <img alt="" class="code_img_closed" id="code_img_closed_417c4ff8-c9cd-4a7b-ae87-4c97f9680b87" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-8f900a89c6347c561fdf2122f13be562.gif">
  <img alt="" class="code_img_opened" id="code_img_opened_417c4ff8-c9cd-4a7b-ae87-4c97f9680b87" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-961ddebeb323a10fe0623af514929fc1.gif">
  <div class="cnblogs_code_hide" id="cnblogs_code_open_417c4ff8-c9cd-4a7b-ae87-4c97f9680b87">
   <pre class="blockcode"><span style="color:#000000;">{
  </span>&#34;name&#34;: &#34;vue2.x-koa2.x&#34;<span style="color:#000000;">,
  </span>&#34;version&#34;: &#34;1.0.0&#34;<span style="color:#000000;">,
  </span>&#34;description&#34;: &#34;A Vue.js and Koa project&#34;<span style="color:#000000;">,
  </span>&#34;author&#34;: &#34;caihuaguang&#64;aixuedai.com &lt;caihuaguang&#64;aixuedai.com&gt;&#34;<span style="color:#000000;">,
  </span>&#34;private&#34;: <span style="color:#0000ff;">true</span><span style="color:#000000;">,
  </span>&#34;scripts&#34;<span style="color:#000000;">: {
    </span>&#34;server&#34;: &#34;node app.js&#34;<span style="color:#000000;">,
    </span>&#34;dev&#34;: &#34;node build/dev-server.js&#34;<span style="color:#000000;">,
    </span>&#34;build&#34;: &#34;node build/build.js&#34;<span style="color:#000000;">
  },
  </span>&#34;dependencies&#34;<span style="color:#000000;">: {
    </span>&#34;axios&#34;: &#34;^0.15.3&#34;<span style="color:#000000;">,
    </span>&#34;bcryptjs&#34;: &#34;^2.4.0&#34;<span style="color:#000000;">,
    </span>&#34;busboy&#34;: &#34;^0.2.14&#34;<span style="color:#000000;">,
    </span>&#34;element-ui&#34;: &#34;^1.2.7&#34;<span style="color:#000000;">,
    </span>&#34;koa&#34;: &#34;^2.2.0&#34;<span style="color:#000000;">,
    </span>&#34;koa-bodyparser&#34;: &#34;^4.2.0&#34;<span style="color:#000000;">,
    </span>&#34;koa-history-api-fallback&#34;: &#34;^0.1.3&#34;<span style="color:#000000;">,
    </span>&#34;koa-jwt&#34;: &#34;^1.3.1&#34;<span style="color:#000000;">,
    </span>&#34;koa-logger&#34;: &#34;^2.0.1&#34;<span style="color:#000000;">,
    </span>&#34;koa-router&#34;: &#34;^5.4.0&#34;<span style="color:#000000;">,
    </span>&#34;koa-static&#34;: &#34;^3.0.0&#34;<span style="color:#000000;">,
    </span>&#34;mysql&#34;: &#34;^2.12.0&#34;<span style="color:#000000;">,
    </span>&#34;sequelize&#34;: &#34;^3.30.4&#34;<span style="color:#000000;">,
    </span>&#34;stylus&#34;: &#34;^0.54.5&#34;<span style="color:#000000;">,
    </span>&#34;stylus-loader&#34;: &#34;^2.4.0&#34;<span style="color:#000000;">,
    </span>&#34;vue&#34;: &#34;^2.2.6&#34;<span style="color:#000000;">,
    </span>&#34;vue-router&#34;: &#34;^2.3.0&#34;<span style="color:#000000;">,
    </span>&#34;vuex&#34;: &#34;^2.2.1&#34;<span style="color:#000000;">
  },
  </span>&#34;devDependencies&#34;<span style="color:#000000;">: {
    </span>&#34;autoprefixer&#34;: &#34;^6.4.0&#34;<span style="color:#000000;">,
    </span>&#34;babel-core&#34;: &#34;^6.24.0&#34;<span style="color:#000000;">,
    </span>&#34;babel-loader&#34;: &#34;^6.4.1&#34;<span style="color:#000000;">,
    </span>&#34;babel-plugin-transform-runtime&#34;: &#34;^6.23.0&#34;<span style="color:#000000;">,
    </span>&#34;babel-preset-es2015&#34;: &#34;^6.24.0&#34;<span style="color:#000000;">,
    </span>&#34;babel-preset-stage-0&#34;: &#34;^6.22.0&#34;<span style="color:#000000;">,
    </span>&#34;babel-register&#34;: &#34;^6.24.0&#34;<span style="color:#000000;">,
    </span>&#34;chalk&#34;: &#34;^1.1.3&#34;<span style="color:#000000;">,
    </span>&#34;connect-history-api-fallback&#34;: &#34;^1.1.0&#34;<span style="color:#000000;">,
    </span>&#34;css-loader&#34;: &#34;^0.25.0&#34;<span style="color:#000000;">,
    </span>&#34;eventsource-polyfill&#34;: &#34;^0.9.6&#34;<span style="color:#000000;">,
    </span>&#34;express&#34;: &#34;^4.13.3&#34;<span style="color:#000000;">,
    </span>&#34;extract-text-webpack-plugin&#34;: &#34;^1.0.1&#34;<span style="color:#000000;">,
    </span>&#34;file-loader&#34;: &#34;^0.9.0&#34;<span style="color:#000000;">,
    </span>&#34;friendly-errors-webpack-plugin&#34;: &#34;^1.1.2&#34;<span style="color:#000000;">,
    </span>&#34;function-bind&#34;: &#34;^1.0.2&#34;<span style="color:#000000;">,
    </span>&#34;html-webpack-plugin&#34;: &#34;^2.8.1&#34;<span style="color:#000000;">,
    </span>&#34;http-proxy-middleware&#34;: &#34;^0.17.2&#34;<span style="color:#000000;">,
    </span>&#34;json-loader&#34;: &#34;^0.5.4&#34;<span style="color:#000000;">,
    </span>&#34;opn&#34;: &#34;^4.0.2&#34;<span style="color:#000000;">,
    </span>&#34;ora&#34;: &#34;^0.3.0&#34;<span style="color:#000000;">,
    </span>&#34;semver&#34;: &#34;^5.3.0&#34;<span style="color:#000000;">,
    </span>&#34;shelljs&#34;: &#34;^0.7.4&#34;<span style="color:#000000;">,
    </span>&#34;url-loader&#34;: &#34;^0.5.7&#34;<span
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP