Day07-员工管理-上传下载

1.员工管理-导出excel

在这里插入图片描述
在这里插入图片描述

  • 导出员工接口返回的是二进制
  • axios配置responseType为blob接收二进制流文件为Blob格式
  • 按装file-saver包，实现下载Blob文件
  • npm install add file-saver
  • 导出员工excel的接口 (src/api/employee.js)
export function exportEmployee(){
  return request({
     url:'/sys/user/export',
     //改变接收数据的类型
     responseType:'blob'//使用blob接收二进制文件流
   })
}
  • 拦截器判断是不是blob类型，如果是 直接返回数据，不再进行解构(src/utils/request.js)
//响应拦截器
service.interceptors.response.use((response)=>{
  if(response.data instanceof Blob){
    return response.data
   }
})
  • 点击按钮调用接口，使用file-saver将Blob转化成文件下载
 <el-button size="mini" @click="exportEmployee">excel导出</el-button>

import FileSaver from 'file-saver'
import { exportEmployee } from '@/api/employee'
methods:{
  async exportEmployee(){
     const result = await exportEmployee()//导出所有的员工
     console.log(result)//使用一个npm包 直接将blob文件下载到本地 file-saver
     FileSaver.saveAs(result,'员工信息表.xlsx')
   }
}

2.员工管理-excel组件

在这里插入图片描述
在这里插入图片描述

  • 创建员工导入组件(src/views/employee/components/import-excel.vue)
 <el-dialog width="500px" title="员工导入" :visible="showExcelDialog" @close="$emit('update:showExcelDialog',false)">
     <el-row type="flex" justify="center">
        <div class="upload-excel">
            <input type="file" accept=".xlsx,.xls" ref="excel-upload-input" >
            <div class="drop">
                <i class="el-icon-upload"></i>
                <el-button type="text">下载导入模板</el-button>
                <span>将文件拖到此处或
                    <el-button type="text" >点击上传</el-button>
                </span>
            </div>
        </div>
     </el-row>
     <el-row type="flex" justify=" end">
        <!-- update:props属性名，值 直接修改 .sync修饰符的属性值 -->
        <el-button size="mini" type="primary" @click="$emit('update:showExcelDialog')"></el-button>
     </el-row>createError.js?2d83:16 Uncaught (in promise) Error: Request failed with status code 429
   </el-dialog>
  • 在员工管理页面-导入该组件并注册使用(src/views/employee/index.vue)
import ImportExcel from './components/import-excel.vue'
export default{
data(){
  showExcelDialog:false//控制excel的弹窗显示和隐藏
},
  components:{
    ImportExcel
   }
}
  • 使用该组件，并且应用变量(src/views/employee/index.vue)
<import-excel :show-excel-dialog.sync = "showExcelDialog" />
  • 点击excel导入按钮
<el-button size='mini' @click="showExcelDialog = true">excel导入</el-button>

3、下载导入模板

在这里插入图片描述
在这里插入图片描述

  • 下载模板的api(src/api/employee.js)
// 下载导入模板
export function getExportTemplate(){
	return request({
		url:'/sys/user/import/template',
		responseType:'blob'//二进制文件流 
	})
}
  • 点击按钮进行下载(src/views/employee/components/import-excel.vue)
<el-button type='text' @click="getTemplate">下载导入模板</el-button>

async getTemplate(){
	const data = await getExportTemplate();
	FileSaver.saveAs(data,'员工导入模板.xlsx')
}

4.员工管理-员工导入-上传excel

在这里插入图片描述
在这里插入图片描述

  • 上传excel的api(src/api/employee.js)
export function uploadExcel(data){
	return request({
		url:'/sys/user/import',
		method:'post',
		data //form-data类型  
	})
}
  • 点击上传-弹出文件选择框(src/views/employee/components/import-excel.vue)
<el-button type="text" @click="handleUpload">点击上传</el-button>

handleUpload(){
	this.$refs['excel-upload-input'].click()
}
  • 监听文件改变-上传excel-关闭弹窗(src/views/employee/components/import-excel.vue)
    JavaScript
<input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="uploadChange" />

async uploadChange(event){
	console.log(event.target.files)
	const files = event.target.files //input的文件列表
	if(files.length > 0){
	  //大于0 说明有文件要上传
	  const data = new FormData()
	  //file:file类型
	  data.append('file',files[0])//将文件参数加入到formData中
	  try{
	  	await uploadExcel(data)
	  	//成功
	  	this.$emit('uploadSuccess') //通知父组件 上传成功
	  	this.$emit('update:showExcelDialog',false)//关闭弹层
	  }catch{
	   //捕获失败
	   //this.$refs['excel-upload-input'].value= ''
	   }finally{
	    //不论成功或者失败都执行finally
	    this.$refs['excel-upload-input'].value=''
	    }
	 }
}
  • 不论成功或者失败，再点击上传都会去选择一个新的excel,使用finally等到最后，将内容清空。
  • 父组件需要监听上传成功的事件(src/views/employee/index.vue)
<import-excel :show-excel-dialog.sync="showExcelDialog" @uploadSuccess="getEmployeeList"></import-excel>

5.员工管理-删除员工

在这里插入图片描述
在这里插入图片描述

  • 删除员工的接口-位置(src/api/employee.js)
//删除员工
export function delEmployee(id){
  return request({
   method:'delete',
   url:`/sys/user/${id}`
   })
}
  • 气泡确认位置(src/views/employee/index.vue)
 <template v-slot="{row}">
            <el-button size="mini" type="text">查看</el-button>
            <el-button size="mini" type="text">角色</el-button>
            <el-popconfirm trigger="hover" title="确认删除该行数据吗？" @onConfirm="confirmDel(row.id)">
              <el-button slot="reference" style="margin-left:10px" size="mini" type="text">删除</el-button>
            </el-popconfirm>
          </template>
  • 删除方法
async confirmDel(id){
  await delEmployee(id){
    if(this.list.length === 1 && this.queryParams.page > 1) this.queryParams.page--
    this.getEmployeeList()
    this.$message.success('删除成功')
   }
}

6.员工详情和路由

在这里插入图片描述

  • 创建一个员工详情组件-位置(src/views/employee/detail.vue)
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <div class="edit-form">
        <el-form ref="userForm" label-width="220px">
          <!-- 姓名 部门 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名" prop="username">
                <el-input size="mini" class="inputW" />
              </el-form-item>
            </el-col>

          </el-row>
          <!-- 工号 入职时间 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="工号" prop="workNumber">
                <el-input size="mini" class="inputW" />
              </el-form-item>
            </el-col>
          </el-row>
          <!--手机 聘用形式  -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="手机" prop="mobile">
                <el-input
                  size="mini"
                  class="inputW"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="部门" prop="departmentId">
                <!-- 放置及联部门组件 -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="聘用形式" prop="formOfEmployment">
                <el-select size="mini" class="inputW" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="入职时间" prop="timeOfEntry">
                <el-date-picker
                  size="mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  class="inputW"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="转正时间" prop="correctionTime">
                <el-date-picker
                  size="mini"
                  type="date"
                  class="inputW"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 员工照片 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="员工头像">
                <!-- 放置上传图片 -->
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 保存个人信息 -->
          <el-row type="flex">
            <el-col :span="12" style="margin-left:220px">
              <el-button size="mini" type="primary">保存更新</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>

    </div>
  </div>
</template>

<script>

export default {

}
</script>

<style scoped lang="scss">
    .edit-form {
      background: #fff;
      padding: 20px;
      .inputW {
        width: 380px
      }
    }

</style>
  • 配置员工详情路由信息(src/router/modules/employee.js)
{
        path:'/employee/detail',//员工详情地址
        component:()=>import('@/view/employee/detail.vue'),
        hidden:true,//隐藏在左侧菜单
        meta:{
            title:'员工详情' //显式在导航的文本
        }
    }
  • 点击添加员工跳转到详情页(src/views/employee/index.vue)
<el-button size="mini" type="primary" @click="$router.push('/employee/detail')">添加员工</el-button>

7.员工详情-表单数据校验

  • 姓名-必填-1-4个字符
  • 手机号-必填-格式校验
  • 部门-必填
  • 聘用形式-必填
  • 入职时间-必填
  • 转正时间-必填-不能小于入职时间
  • 定义数据和规则(src/views/employee/detail.vue)
<el-form label-width="220px" ref="userForm" :model="userInfo" :rules="rules" >
                <!-- 姓名 部门 -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="username" label="姓名" >
                            <el-input v-model="userInfo.username" size="mini" class="inputW">

                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 工号 入职时间 -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="workNumber" label="工号" >
                            <!-- 工号是系统生成的  -->
                            <el-input v-model="userInfo.workNumber" disabled size="mini" class="inputW"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                 <!-- 手机 聘用形式 -->
                 <el-row>
                    <el-col :span="12">
                        <el-form-item prop="mobile" label="手机" >
                            <el-input v-model="userInfo.mobile" size="mini" class="inputW"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="departmentId" label="部门" >
                            <!-- 级联部门组件 -->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="formOfEmployment" label="聘用形式" >
                           <el-select v-model="userInfo.formOfEmployment" size="mini" class="inputW">
                            <el-option label="正式" :value="1" />
                            <el-option label="非正式" :value="2" />
                        </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="timeOfEntry" label="入职时间" >
                          <el-date-picker v-model="userInfo.timeOfEntry" size="mini" type="date" value-format="yyyy-MM-dd" class="inputW"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="correctionTime" label="转正时间" >
                          <el-date-picker v-model="userInfo.correctionTime" size="mini" type="date"  class="inputW"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 员工照片 -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="员工头像">
                            <!-- 放上传图片 -->
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 保存个人信息 -->
                <el-row type="flex">
                    <el-col :span="12" style="margin-left:220px;">
                       <el-button size="mini" @click="saveData" type="primary">保存更新</el-button>
                    </el-col>
                </el-row>
            </el-form>

 data() {
    return {
        userInfo:{
            username:'',//用户名
            mobile:'',//手机号
            workNumber:'',//工号
            formOfEmployment:null,//聘用形式
            departmentId:null,//部门id
            timeOfEntry:'',//入职时间
            correctionTime:''//转正时间
        },
        rules:{
            username:[
                {
                    required:true,message:'请输入姓名',trigger:'blur'
                },
                {
                    min:1,max:4,message:'姓名为1-4位'
                }
            ],
            mobile:[
                {
                    required:true,
                    message:'请输入手机号',
                    trigger:'blur'
                },
                {
                    pattern:/^1[3-9]\d{9}$/,
                    message:'手机号格式不正确',
                    trigger:'blur'
                }
            ],
            formOfEmployment:[
                {
                    required:true,
                    message:'请选择聘用形式',
                    trigger:'blur'
                }
            ],
            departmentId:[
                {
                    required:true,
                    message:'请选择部门',
                    trigger:'blur'
                }
            ],
            timeOfEntry:[
                {
                    required:true,
                    message:'请选择入职时间',
                    trigger:'blur'
                }
            ],
            correctionTime:[
                {
                    required:true,
                    message:'请选择转正时间',
                    trigger:'blur'
                },
                {
                    validator:(rule,value,callback)=>{
                        if(this.userInfo.timeOfEntry) {
                            if(new Date(this.userInfo.timeOfEntry) > new Date(value)){
                                callback(new Error('转正时间不能小于入职时间'))
                                return
                            }
                        }
                        callback()
                    }
                }
            ]

        }

    }
  },
  methods: {
    saveData(){
        this.$refs.userForm.validate()
    }
  }

8.员工详情-部门级联组件

  • Cascader级联组件的特性
  • options为一个树形结构的数据源
  • props可以设置数据源中的字段例如 label(展示) value(存取)
  • separator为展示的分隔符
    在这里插入图片描述
  • 创建select-tree组件(src/views/employee/components/select-tree.vue)
<template>
  <el-cascader size="mini" :options="treeData" :props="props" separator="-">

  </el-cascader>
</template>

<script>
import { getDepartment } from '@/api/department';
import { transListToTreeData } from '@/utils';
export default {
  data() {
    return {
        treeData:[],//赋值给级联组件的options
        props:{
            label:'name',//要展示的字段
            value:'id' //要存储的字段
        }
    }
  },
  created(){
    this.getDepartment()
  },
  methods: {
    async getDepartment(){
        this.treeData = transListToTreeData(await getDepartment(),0) //将组织架构的数据 转化树形赋值给treeData
    }
  }
}
</script>

<style scoped lang="scss">
    .el-cascader{
        width: 300px;
    }
</style>
  • 使用组件(src/views/employee/detail.vue)
 <el-form-item prop="departmentId" label="部门" >
                            <!-- 级联部门组件 -->
                            <selectTree v-model="userInfo.departmentId" />
                        </el-form-item>

import selectTree from './components/selectTree.vue'
components:{
    selectTree
  }

9.员工详情-级联组件-双向绑定

在这里插入图片描述

  • 接收value属性(src/views/employee/components/select-tree.vue)
 <el-cascader
    :value="value"
    size="mini"
    :options="treeData"
    :props="props"
    separator="-"
    @change="changeValue"
  />

export default{
  props:{
    value:{
      type:Number,
      default:null 
    }
   },
   data() {
    return {
      treeData: [],//赋值给级联组件的options
      props: {
        label: 'name',//要展示的字段
        value: 'id' //要存储的字段
       
      },
    }
  },
    created() {
    this.getDepartment()
  },
  methods: {
    async getDepartment() {
      this.treeData = transListToTreeData(await getDepartment(), 0) //将组织架构的数据 转化树形赋值给treeData
    },
    changeValue(list) {
      //取到数组的最后一项
      if (list.length > 0) {
        this.$emit('input', list[list.length - 1]) //将最后一位的id取出 传出去
      } else {
        this.$emit('input', null)//如果长度为0 说明值为空
      }
    }
  }
}
  • 级联改变触发input事件(src/views/employee/components/select-tree.vue)
changeValue(list){
  //取到数组的最后一项
  if(list.length > 0){
    this.$emit('input',list[list.length -1]) 
  }else{
    this.$emit('input',null) // 如果长度为0 说明值为空 
  }
}

10.保存更新

在这里插入图片描述

  • 保存更新-新增员工接口-位置(src/api/employee.js)
export function addEmployee(data){
  return request({
    url:'/sys/user',
    methods:'post',
    data 
  })
}
  • 点击保存按钮进行新增-代码位置(src/views/employee/detail.vue)
saveData(){
  this.$refs.userForm.validate(isOK=>{
    if(isOK){
	  //校验通过
	  await addEmployee(this.userInfo)
	  this.$message.success('新增成功');
	  this.$router.push('/employee')
	}
  })
}

11.员工详情-编辑员工-查看员工

在这里插入图片描述
在这里插入图片描述

  • 获取员工详情接口(src/api/employee.js)
export function getEmployeeDetail(id){
  return request({
     url:`/sys/user/${id}`
   })
}
  • 点击查看时跳转到详情携带id(src/views/employee/index.vue)
 <el-button size="mini" @click="$router.push(`/employee/detail/${row.id}`)" type="text">查看</el-button>
  • 配置详情的路由支持新增模式和编辑模式(src/router/modules/employee.js)
  • ?标识可有可无，可以传id也可以不传，页面都能正确显式
{
  path:'/employee/detail/:id?',//
  component:()=>import('@/views/employee/detail.vue'),
  hidden:true,
  meta:{
    title:'员工详情'  
  }
}
  • 员工详情判断是否有id，有id就查询详情数据(src/views/employee/detail.vue)
created(){
  //获取路由参数中的id
  this.$route.params.id && this.getEmployeeDetail()
},
methods:{
  async getEmployeeDetail(){
    this.userInfo = await  getEmployeeDetail(this.$route.params.id)
  }
}

12.员工详情-编辑员工-保存

在这里插入图片描述

  • 更新员工的接口(src/api/employee.js)
 //更新员工
 export function updateEmployee(data){
    return request({
        url:`/sys/user/${data.id}`,
        method:'put',
        data
    })
 }
  • 保存时区分保存和新增(src/views/employee/detail.vue)
 saveData(){
        this.$refs.userForm.validate(async isOK=>{
            if(isOK){
                //编辑模式
                if(this.$route.params.id){
                    await updateEmployee(this.userInfo)
                    this.$message.success('更新成功')
                }else{
                      //校验通过
                    await addEmployee(this.userInfo)
                    this.$message.success('新增员工成功')
                }
              
               this.$router.push('/employee')
            }
        })
    },
  • 当编辑模式时，让手机号不可编辑(src/views/employee/detail.vue)
 <el-input
        v-model="userInfo.mobile"
        :disabled="!!$route.params.id"
        size="mini"
        class="inputW"
  />

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/801627.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

普通人还有必要学习 Python 之类的编程语言吗？

普通人还有必要学习 Python 之类的编程语言吗？

在开始前分享一些编程的资料需要的同学评论888即可拿走 是我根据网友给的问题精心整理的对于编程的重要性&#xff0c;这里就不详谈了。 未来&#xff0c;我们和机器的交流会越来越多&#xff0c;编程可以简单看作是和机器对话并分发给机器任务。机器不仅越来越强大&#xff0…
阅读更多...
芯课堂 | Synwit_UI_Creator（ugui）平台之PC端界面设计篇

芯课堂 | Synwit_UI_Creator（ugui）平台之PC端界面设计篇

​今天小编给大家介绍的是华芯微特面向小尺寸TFT-LCD屏驱市场量身打造的Synwit_UI_Creator&#xff08;ugui&#xff09;自研开发套件。 UI_Creator&#xff08;ugui&#xff09;开发套件分为上位机和下位机&#xff0c;以下如无特指&#xff0c;上位机即为PC端设计器/仿真器&…
阅读更多...
【香橙派AiPro】基于VGG16的火灾检测模型预测

【香橙派AiPro】基于VGG16的火灾检测模型预测

目录 引言开发板介绍开发板使用准备工作工具文档 拨码开关镜像烧录连接开发板下载MobaXterm网线-SSH连接开发板设置WIFI连接WIFI-SSH连接开发板确定开发板IP方法 Vnc可视化WindowsiPad 开发工具安装 散热风扇基于VGG16的火灾检测模型预测数据集准备目录结构代码操作 安装宝塔最…
阅读更多...
RISC-V在线反汇编工具

RISC-V在线反汇编工具

RISC-V在线反汇编工具&#xff1a; https://luplab.gitlab.io/rvcodecjs/#q34179073&abifalse&isaAUTO 不过&#xff0c;似乎&#xff0c;只支持RV32I、RV64I、RV128I指令集&#xff1a;
阅读更多...
2024大模型十大趋势

2024大模型十大趋势

2024大模型十大趋势 关键要点一、机器外脑时代的智慧探索二、机器外脑、创意生成和情感陪伴三、大模型驱动的新未来&#xff1a;AI带来创意转化与机遇四、人物-行为-场景一体化&#xff1a;未来人工智能的新范式五、未来数字内容生产的基础设施六、共创、共建、共享智能美好未来…
阅读更多...
【入门篇】2.3 STM32启动模式（一）

【入门篇】2.3 STM32启动模式（一）

一，Boot引脚分步 二，启动电路 三，启动模式 STM32F4 根据 BOOT 引脚的电平选择启动模式，这两个 BOOT 引脚根据外部施加的电平来决定芯片的启动地址。 下表中 BOOT0 和 BOOT1 是 STM32 芯片上面的两个引脚，用于控制 STM32
阅读更多...
哪个牌子充电宝好用？实测倍思、西圣、安克充电宝，哪个值得入手

哪个牌子充电宝好用？实测倍思、西圣、安克充电宝，哪个值得入手

目前充电宝已经成为我们日常出行的重要依靠。然而&#xff0c;共享充电宝不仅价格昂贵&#xff0c;而且还存在诸多安全隐患&#xff0c;让我们用起来总是不太放心。为了帮大家找到既好用又实惠且安全的充电宝&#xff0c;我们对倍思、西圣、安克这三个热门品牌的充电宝进行了深…
阅读更多...
Ubuntu/Linux 安装ITKSnap

Ubuntu/Linux 安装ITKSnap

文章目录 1. 安装ITKSnap1.1 下载后安装 2.进入opt文件夹改名3. 更改启动项4. 创建硬链接5. 添加桌面启动方式6. 即可使用 1. 安装ITKSnap http://www.itksnap.org/pmwiki/pmwiki.php?nMain.HomePage 1.1 下载后安装 找到下载的文件夹&#xff0c;文件夹内打开terminal。复…
阅读更多...
提升代码质量：利用策略模式优化Spring Boot应用的设计

提升代码质量：利用策略模式优化Spring Boot应用的设计

&#x1f4e3;前言 在Spring Boot中使用策略模式&#xff08;Strategy Pattern&#xff09;是一种常见的设计模式实践&#xff0c;它允许在运行时选择算法的行为。策略模式定义了一系列的算法&#xff0c;并将每个算法封装起来&#xff0c;使它们可以互换。这样做的好处是使算法…
阅读更多...
MyBatis源码中的设计模式1

MyBatis源码中的设计模式1

1. 建造者模式的应用 建造者模式属于创建类模式&#xff0c;通过一步一步地创建一个复杂的对象&#xff0c;能够将部件与其组装过程分开。用户只需指定复杂对象的类型&#xff0c;就可以得到该对象&#xff0c;而不需要了解其内部的具体构造细节。《Effective Java》中也提到&…
阅读更多...
CH552G使用IAP下载

CH552G使用IAP下载

常见下载中的方式ISP&#xff0c;IAP&#xff0c;ICP 参考&#xff0c;CH552G中文手册&#xff0c;参考1 ISP&#xff1a;In System Programing&#xff0c;在系统编程。是常见的&#xff0c;使用软件&#xff0c;先将某个引脚&#xff08;例如boot&#xff09;连接到合适的电…
阅读更多...
领航Linux UDP：构建高效网络新纪元

领航Linux UDP：构建高效网络新纪元

欢迎来到 破晓的历程的 博客 ⛺️不负时光&#xff0c;不负己✈️ 文章目录 引言Udp和Tcp的异同相同点不同点总结 1.1、socket1.2、bind1.3、recvfrom1.4、sendto2.1、代码2.1、说明3.1、代码3.2、说明 引言 在前几篇博客中&#xff0c;我们学习了Linux网络编程中的一些概念。…
阅读更多...
【Django】网上蛋糕项目商城-购物车和我的订单功能

【Django】网上蛋糕项目商城-购物车和我的订单功能

1.购物车功能 在首页中的滚动栏的商品&#xff0c;热门商品&#xff0c;新品&#xff0c;以及商品详情中都有加入购物车按钮 在models文件中创建购物车表&#xff0c;用于保存当前用户添加的商品信息 # 购物车表 class ShoppingCar(models.Model):# 用户iduserIdmodels.Integ…
阅读更多...
JRT打印设计器解耦

JRT打印设计器解耦

为了让打印设计器可以给多个产品打印通用&#xff0c;那么设计器就不能嵌入太多具体产品的业务信息。比如医院主键、工作组、医嘱关联登。 设计器在设计表的时候就没引入检验部分的依赖&#xff0c;采用产品组唯一标识和产品组业务ID来隔离不同组的模板设计。 维护菜单时候就…
阅读更多...
CTFshow--web--xss

CTFshow--web--xss

目录 web316 web317~319 web320~326 web327 web328 web329 web330 web331 web332 web333 先在自己的服务器写上代码 <?php$content $_GET[1]; if(isset($content)){file_put_contents(flag.txt,$content); }else{echo no data input; }要拿到管理员的cookie , 而…
阅读更多...
Java - 程序员面试笔记记录 实现 - Part5

Java - 程序员面试笔记记录 实现 - Part5

7.1 Struts 优点&#xff1a; 1. MVC模式实现了表现与逻辑的分离&#xff0c;扩展性高。 2. 提供页面导航功能&#xff0c;通过配置文件建立整个系统各部分之间的联系。 3. 集成了一些常用处理功能。 缺点&#xff1a; 1. 仅面向 Web 应用程序开发 2. Action 非线程安全…
阅读更多...
HTML+CSS+JS井字棋（来自动下棋）

HTML+CSS+JS井字棋（来自动下棋）

井字棋 自动下棋 玩家先下&#xff0c;计算机后下 源码在图片后面 点赞❤️收藏⭐️关注&#x1f60d; 效果图 源代码 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <title>Tic Tac Toe Game</tit…
阅读更多...
开始Linux之路

开始Linux之路

人生得一知己足矣&#xff0c;斯世当以同怀视之。——鲁迅 Linux操作系统简单操作指令 1、ls指令2、pwd命令3、cd指令4、mkdir指令(重要)5、whoami命令6、创建一个普通用户7、重新认识指令8、which指令9、alias命令10、touch指令11、rmdir指令 及 rm指令(重要)12、man指令(重要…
阅读更多...
技术周总结 2024.07.08~07.14(算法，Python,Java,Scala,PHP)

技术周总结 2024.07.08~07.14(算法，Python,Java,Scala,PHP)

文章目录 一、07.13 周六1.0&#xff09;算法题&#xff1a;字符串中的单词反转1.1&#xff09; 问题01:可靠性计算中的MTTR MTTF MTBF 分别指什么&#xff1f;他们之间有什么联系&#xff1f;MTTR (Mean Time to Repair)MTTF (Mean Time to Failure)MTBF (Mean Time Between F…
阅读更多...
韦东山嵌入式linux系列-驱动进化之路：总线设备驱动模型-课后作业

韦东山嵌入式linux系列-驱动进化之路：总线设备驱动模型-课后作业

在内核源码中搜索 platform_device_register 可以得到很多驱动&#xff0c;选择 一个作为例子&#xff1a; ① 确定它的名字 ② 根据它的名字找到对应的 platform_driver ③ 进入 platform_device_register/platform_driver_register 内部&#xff0c;分析 dev 和 drv 的匹配过…
阅读更多...
最新文章

Copyright @ 2022~2023