1. 使用若依VUE前后端分离框架

2. 配置Mysql数据库，配置Redis数据库，Mac开发需要修改logbook日志路径

3. 添加模块务必将包路径改为：com.ruoyi.XXX，并且在自动生成模块修改包路径

4. 建议使用PDMan先进行数据库字段的设置，然后自动生成数据库开发文档和数据库SQL文件

5. 数据库创建完成后，在若依后台进行数据库导入，同时进行编辑，修改部分字段是否显示、是否进行模糊查询以及使用什么样的前端样式

6. Element UI 的表格中添加图片

   <el-table-column label="商品图片" align="center" prop="pictureUrl">
     <template   slot-scope="scope">
       <div  v-if="scope.row.pictureUrl !== '-1'">
         <img :src="scope.row.pictureUrl"  min-width="70" height="70" alt="图片走丢了!"/>
       </div>
       <div v-else>
         暂无图片
       </div>
     </template>
   </el-table-column>

7. 实现图片上传到后台服务器

   template内容

   <el-form-item label="商品图片" prop="picUrl">
     <el-upload
                :headers="imgUpload.headers"
                class="upload-demo"
                :action="imgUpload.url"
                :file-list="imgList"
                :on-success="imgUploadSuccess"
                :on-preview="handlePreview"
                :limit="1"
                :on-remove="handleRemove"
                list-type="picture">
       <el-button size="small" type="primary">点击上传</el-button>
       <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
     </el-upload>
   </el-form-item>

   数据内容

   // 图片上传 *****************
   imgUpload: {
   	// 设置上传的请求头部
   	headers: {
   		Authorization: "Bearer " + getToken()
   	},
   // 图片上传的方法地址:
   url: process.env.VUE_APP_BASE_API + "/erp/picture/upload",
   url2: process.env.VUE_APP_BASE_API
   },
   imgList: []

   方法

   /** 图片上传 */
   /** 图片上传成功 */
   imgUploadSuccess(resp, file) {
     if (resp.code === 200) {
       // 将图片的url添加到数组中
       this.imgList.push(resp.data);
       this.form.pictureUrl = resp.data.url;
       this.form.picUrl = resp.data.id;
       this.$message({
         message: '文件上传成功！',
         type: 'success'
       });
     }
   },
   /** 图片移除 */
   handleRemove(file, fileList) {
     this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning'
     }).then(() => {
       delPicture(file.id);
       this.form.picUrl = '-1';
       this.imgList = [];
       this.$message({
         type: 'success',
         message: '删除成功!'
       });
     }).catch(() => {
       this.$message({
         type: 'info',
         message: '图片暂时消失，已取消删除！'
       });
     });
   },