vue 封装面包屑组件教程

<template>
 <div id="bdy">
 <Head/>
 <div class="tbody"> 
<el-steps :active="active" finish-status="success">
 <el-step title="上传头像"></el-step>
 <el-step title="个人信息"></el-step>
 <el-step title="专业信息"></el-step>
 <el-step title="证书信息"></el-step>
</el-steps>
<!-- 个人信息 -->
 <el-form ref="form" :model="form" label-width="80px">
<div class="info" v-if="active==1">
 <el-form-item label="上传头像" prop="imageUrl">
 <el-upload
 class="avatar-uploader"
 action="https://jsonplaceholder.typicode.com/posts/"
 :show-file-list="false"
 :on-success="handleAvatarSuccess"
 :before-upload="beforeAvatarUpload" >
 <img v-if="form.imageUrl" :src="/UploadFiles/2021-04-02/form.imageUrl">




<style>
.tbody{
 width:80%;
 margin-left:10%;
 margin-top: 2%;
}
/* 表单 */
.avatar-uploader .el-upload {
 border: 1px dashed #d9d9d9;
 border-radius: 6px;
 cursor: pointer;
 position: relative;
 overflow: hidden;
 }
 .avatar-uploader .el-upload:hover {
 border-color: #409EFF;
 }
 .avatar-uploader-icon {
 font-size: 28px;
 color: #8c939d;
 width: 178px;
 height: 178px;
 line-height: 178px;
 text-align: center;
 }
 .avatar {
 width: 178px;
 height: 178px;
 display: block;
 }
</style>





<script>
//表单js代码
import Head from "../../components/common/Head";
import axios from "axios";
import Qs from "qs";
import router from "../../router/router.js";
 const cityOptions = ['婚姻家庭', '情绪管理', '恋爱心理', '个人成长','人际关系','心理健康','职场心理','亲子教育','性心理'];
 export default{
 components: {
 Head
 },
 data() {
 return {
 active: 1,
 form: {
 area: ['个人成长'],
 checkAll: false,
 cities: cityOptions,
 isIndeterminate: true,
 quality: 0,
 imageUrl: '',
 username : '',
 tell: '',
 indentity: '',
 number:'',
 instroduce:'',
 time:''
 }
 }
 },
 methods: {
 onSubmit() {
 //this.form.checkedCities获取多选框的内容 zxs[this.form.radio] this.form.imageUrl
 //开始提交 在这里进行跨域请求 
 this.axios({
 method: "post",
 url: "/api/PsychoSys/tuser.action",
 data: Qs.stringify(this.form)
 })
 .then(res => {
 this.$router.push("/tinfo");
 })
 .catch(function(err) {
 console.log(err);
 });
 /*在这里进行跨域请求*/
 //开始提交
 },
 handleAvatarSuccess(res, file) {
 this.form.imageUrl = URL.createObjectURL(file.raw);
 },
 beforeAvatarUpload(file) {
 const isJPG = file.type === 'image/jpeg';
 const isLt2M = file.size / 1024 / 1024 < 2;
 if (!isJPG) {
 this.$message.error('上传头像图片只能是 JPG 格式!');
 }
 if (!isLt2M) {
 this.$message.error('上传头像图片大小不能超过 2MB!');
 }
 return isJPG && isLt2M;
 },
 handleCheckAllChange(val) {
 this.form.area = val "htmlcode">

package cn.com.service;
import java.io.IOException;
import java.util.List; 
import javax.servlet.http.HttpServletResponse; 
import org.apache.struts2.ServletActionContext;
import org.hibernate.Query;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;
 
import cn.com.bean.Teacher;
 
import com.opensymphony.xwork2.ModelDriven;
@Repository(value="teacherUser")
@Scope("prototype")
public class TeacherUser implements ModelDriven<Teacher>{
 @Autowired
 private SessionFactory sf;
 @Autowired
 private Teacher tea;
 private List<String> area;
 public List<String> getArea() {
 return area;
 }
 public void setArea(List<String> area) {
 this.area = area;
 }
 @Transactional
 public String regedit_user(){
 //普通用户注册 ,用户名不能重复
 Session session=sf.getCurrentSession();
 //查询是否重复
 String sql="from Teacher where username=";
 Query query=session.createQuery(sql);
 query.setString(0, tea.getUsername());
 Teacher t=(Teacher)query.uniqueResult();
 String toast="";
 String [] zxs ={"国家二级咨询师","国家三级咨询师","注册系统咨询师","注册系统督导师","其他"};
 String q="";
 if(t!=null){
 toast="fail"; 
 }else{
 //处理数据
 Integer o=Integer.parseInt(tea.getQuality());
 tea.setQuality(zxs[o]);
 tea.setAreas(area.toString());
 toast="success";
 session.save(tea); 
 }
 HttpServletResponse response = ServletActionContext.getResponse();
 response.setCharacterEncoding("utf-8");
 try {
 response.getWriter().write(toast);
 } catch (IOException e) {
 // TODO Auto-generated catch block
 e.printStackTrace();
 }
 return null; 
 }
 
 public Teacher getModel() {
 return tea;
 }
}



以上这篇vue 封装面包屑组件教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。