SpringBoot + Vue + Element UI

首先第一步导入依赖thymeleaf<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency>...

超级大蚂蚁

3109人浏览 · 2020-09-14 15:58:25

超级大蚂蚁 · 2020-09-14 15:58:25 发布

首先第一步导入依赖 thymeleaf

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

application.properties 配置文件中，设置thymeleaf 属性

# 开发阶段关闭thymeleaf的模板缓存
#设置false不缓存修改页面及时生效
spring.thymeleaf.cache=false
spring.thymeleaf.suffix=.html
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.encoding=utf-8

上面不配置也可以默认ThymeleafProperties 类里加过了

创建一个index.html ，并引入element UI

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<body style="">

    <div class="center" >
        <div id="app">
            <el-form ref="form" :model="form" label-width="80px">
                <h2>TestDemo</h2>

                <el-form-item label="活动名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-date-picker
                            v-model="form.date1"
                            type="datetime"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="即时配送">
                    <el-switch v-model="form.delivery"></el-switch>
                </el-form-item>
                <el-form-item label="活动性质">
                    <el-checkbox-group v-model="form.type">
                        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                        <el-checkbox label="地推活动" name="type"></el-checkbox>
                        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="特殊资源">
                    <el-radio-group v-model="form.resource">
                        <el-radio label="线上品牌商赞助"></el-radio>
                        <el-radio label="线下场地免费"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="活动形式">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button type="primary" icon="el-icon-search">搜索</el-button>
                    <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>

</body>
<style>
    h2{
        text-align: center;
    }
    .center{
        width: 50%;
        height: 50%;
        margin:50px auto;
        padding: 20px 50px;
        box-shadow: 0 2px 300px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        border-radius: 30px;
    }


</style>
<script>
    new Vue({
        el:'#app',
        data:function(){
            return {
                visible: false,
                form: {
                    name: '1',
                    region: '',
                    date1: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                }
            }
        },
        methods: {
            onSubmit() {
                let formData = new FormData();
                for(var key in this.form){
                    formData.append(key,this.form[key]);
                }


                this.$message({
                    message: 'submit!',
                    type: 'success'
                });
                console.log(formData);
                console.log(JSON.stringify(this.form));

            }
        }
    });
</script>
</html>

下面创建一个启动Controller，return直接跳转到index.html 页面上

@Controller
public class IndexController {
    @RequestMapping("/")
    public String home()   {
      
        return "index";
    }
}

显示页面效果

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^