进存销系统

进存销系统接口文档


进销存系统技术文档(前端)

<h1><center>总体架构</center></h1> <h6><center>本前端项目所使用的技术栈为:Vue、Vue-CLi、Vant、vue-quaggajs、axios、VueX、Vue-router、nprogress、Echarts、Json。</center></h6> <h6><center>部署环境:Ubuntu Server 20.4LTS,Nginx。采用移动端Rem适配以及flex布局。</center></h6> <h2><center>一、商品</center></h2> <h6><center>商品具有供应商名,商品名,商品id,商品状态等属性,其中商品状态码用来表示的生命周期,本项目主要通过“api/common/index.js”文件下的“examineApi()”函数来实现商品的状态码修改,函数传入两个参数,一个是encode,另外一个是code,其中,code为状态码,encode为商品的编码,通过商品的编码来实现对商品状态码的修改,商品状态码所表示的商品状态以线性表的形式表示,如下图所示:</center></h6> <center>![](https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=2a31798ebcb1f6a87d43b24172006771&file=file.png)</center> <h6><center>根据不同的状态码来标别商品的逻辑删除和审批状态</center></h6> <h2><center>二、请求API</center></h2> <h6><center>如下图所示,“basedata”为基础资料管理模块的api,“common”为审批模块的请求api,“login”为登录模块的请求api,“my”为“我的”页面模块的请求api,“purchaseManager”为采购管理的请求api,“userManager”为用户管理的请求api</center></h6> <center>![](https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=8eb7be8a8c0973f6b2a469c9338fc393&file=file.png)</center> <h3>axios初始化</h3> <pre><code class="language-javascript">let requests = axios.create({ baseURL: "http://www.changbaiqi.com:8970", timeout: 5000, Credential: true });</code></pre> <h3>请求拦截器</h3> <pre><code class="language-javascript"> requests.interceptors.request.use(config =&gt; { nprogress.start(); if (localStorage.getItem('token')) { // 在请求头中添加token config.headers.Authorization = localStorage.getItem('token') } return config } ) </code></pre> <h3>响应拦截器</h3> <pre><code class="language-javascript">requests.interceptors.response.use(config =&gt; { nprogress.done() return config }, (err) =&gt; { nprogress.done() return new Promise() } ) </code></pre> <h2><center>三、路由组件</center></h2> <h6><center>如下图所示,src/views目录下都为路由组件,全部采用驼峰命名法,其中“my”组件和“menu”是“main”的子路由。main是“首页”的组件,basedataManager为基础资料管理的组件,financialManager是财务管理的组件,purchaseManager为采购管理的组件,recycle为“订单回收站”的组件,salesManger为销售管理的组件,settiing为设置的组件,statisticAanalise为统计资料的组件,stockManager为仓库管理的组件,userManager为用户管理的组件</center></h6> <center>![](https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=af6b129406183971de69227f9c6fa75f&file=file.png)</center> <h2><center>四、非路由组件</center></h2> <h6><center>如下图,components/navbar下的index.vue为非路由组件,是主要是导航栏,实现吸顶,返回上一级路由等操作。</center></h6> <center>![](https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=4b5b26ab45dc1a2c2fc9d735f8e6ce95&file=file.png)</center> <h2><center>五、使用方法</center></h2> <h6></h6> <pre><code class="language-javascript">//安装依赖包 npm i //打包测试环境 npm run serve //打包部署 npm run build</code></pre>

页面列表

ITEM_HTML