码迷,mamicode.com
首页 > Web开发 > 详细

[前端]纯<script>方式引入库,不启动web服务使用vue+qs+elementUI+thymeleaf。附js包

时间:2020-05-30 12:41:17      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:res   简单   www   rap   一个   element   color   block   下载   

使用背景
由于是使用springboot开发的后端,前端配套使用了thymeleaf标签,类似于jsp里面的EL和JSTL语法,这个语法原来就是为了替代jsp。
前端使用h5开发,该页面使用的不多,可以完全忽略该语法。想学的可以前去可以百度一下。
由于是前后端都是一个人开发,所以起两个服务明显是我不希望看到的。所以如果能够直接导入,那么再好不过了。
使用vue服务起和直接script导入还是有细微差别的。以下简单介绍一下,具体可以参考以下代码。

使用thymeleaf
<html xmlns:th="http://www.springframework.org/schema/jdbc">

包引入
<link rel="stylesheet" href="css/elemen-ui.css" th:href="@{/css/elemen-ui.css}"/>
 <script type="text/javascript" src="js/axios.min.js" th:href="@{/js/axios.min.js}" charset="utf-8"></script>
 <script type="text/javascript" src="js/vue.min.js" th:href="@{/js/vue.min.js}" charset="utf-8"></script>
 <script type="text/javascript" src="js/element.js" th:href="@{/js/element.js}" charset="utf-8"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
直接将js包下载到本地使用script标签引入,需要引入的包。需要的朋友可以点击下面超链接复制到本地。
element的css包/js包
vue的js包
axios的js包
qs的js包

对于一般的项目够用了,比如我这样的。

如果使用thymeleaf语言,在html标签内可通过th标签加${}表达式访问model里的对象数据。但如果不想通过th标签而是简单地访问model对象数据,
或是想在javascript代码块里访问model中的数据,则要使用内联的方法。

在<script>中使用 th:inline可以在js代码里通过双中括号使用后台变量
[[${session.user.name}]]
<script th:inline="javascript" type="application/javascript">

qs 区别
直接引用会报错,需要加上window,qs改成Qs,这是与vue中不同的地方。其余都是相同的。
window.Qs.stringify(params)

这样我们就可以少启动一个服务了。

<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/jdbc">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="css/elemen-ui.css" th:href="@{/css/elemen-ui.css}"/>
    <script type="text/javascript" src="js/axios.min.js" th:href="@{/js/axios.min.js}" charset="utf-8"></script>
    <script type="text/javascript" src="js/vue.min.js" th:href="@{/js/vue.min.js}" charset="utf-8"></script>
    <script type="text/javascript" src="js/element.js" th:href="@{/js/element.js}" charset="utf-8"></script>
    <title>检修(非电类)工作票</title>
</head>
<body>
<div class="table_wrap" id="app">
    <!--startprint-->
    <table class="temperatureChart" id="PrintArea">
        <caption>
            <p style="font-size: 20px;font-weight: bold">检修(非电类)工作票</p>
        </caption>
        <thead>
        </thead>
        <tbody>
        <tr>
            <td style="width: 20%;">工作单位</td>
            <td style="width: 40%;">剥离运行部</td>
            <td style="width: 20%;">编号</td>
            <td style="width: 20%;">{{inspectlog_code}}</td>
        </tr>
        <tr>
            <td>工作成员</td>
            <td><select name="equip_code" v-model="work_member" lay-verify="required" lay-search="">
                <option v-for="item in employee" v-bind:value="item.emp_code" value="">{{item.emp_name}}</option>
            </select>
            </td>
            <td>作业负责人</td>
            <td><select name="equip_code" v-model="work_timoneer" lay-verify="required" lay-search="">
                <option v-for="item in employee" v-bind:value="item.emp_code" value="">{{item.emp_name}}</option>
            </select></td>
        </tr>
        <tr>
            <td>工作设备/地点</td>
            <td><select name="equip_code" lay-verify="required" lay-search="">
                <option v-for="item in equip" v-bind:value="item.equip_code" value="">{{item.equip_desc}}</option>
            </select>/
                <select name="modules" v-model="work_address" lay-verify="required" lay-search="">
                    <option value="">剥离运行部</option>
                    <option value="1">一号检修点</option>
                    <option value="2">二号检修点</option>
                </select>
            </td>
            <td>作业人数</td>
            <td><select name="modules" v-model="work_empCount" lay-verify="required" lay-search="">
                <option value="1">1人</option>
                <option value="2">2人</option>
                <option value="3">3人</option>
                <option value="4">4人</option>
                <option value="5">5人</option>
                <option value="6">6人</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>工作内容</td>
            <td colspan="3">
                <input value="" style="display: inline-block;width:100%;text-align: left" v-model="inspect_desc"/></td>
        </tr>
        <tr>
            <td>计划作业时间</td>
            <td colspan="3"><el-date-picker
                            v-model="start_date"
                            type="datetime"
                            placeholder="选择日期时间"
                            default-value
                            format="yyyy年MM月dd日 HH:mm:ss"
                            prefix-icon="el-icon-date"
                            clear-icon="el-icon-circle-close"></el-date-picker>开始,至自<el-date-picker
                        v-model="stop_date"
                        type="datetime"
                        format="yyyy年MM月dd日 HH:mm:ss"
                        placeholder="选择日期时间"
                        prefix-icon="el-icon-date"
                        clear-icon="el-icon-circle-close"
                        default-time="12:00:00">
                </el-date-picker>完结
            </td>
        </tr>
        <tr>
            <td colspan="3" style="text-align: left;">1.必须采取的安全措施</td>
            <td>选用划"〇"</td>
        </tr>
        <tr>
            <td colspan="3">劳动保护穿戴齐全、上下现场提醒司机不超员不超速,检修作业时告知司机、挂好安全锁、不违章操作</td>
            <td><select name="modules" v-model="safety_rule" lay-verify="required" lay-search="">
                <option value="1"></option>
                <option value="2">×</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>工作票签发人:</td>
            <td><select name="equip_code" v-model="signature_code" lay-verify="required" lay-search="">
                <option v-for="item in employee" v-bind:value="item.emp_code" value="">{{item.emp_name}}</option>
            </select>
            </td>
            <td colspan="2">
                <el-date-picker
                        v-model="signature_date"
                        type="datetime"
                        placeholder="选择日期时间"
                        default-value
                        format="yyyy年MM月dd日 HH:mm:ss"
                        prefix-icon="el-icon-date"
                        clear-icon="el-icon-circle-close">
                </el-date-picker>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
<script th:inline="javascript" type="application/javascript">
    var vm = new Vue({
        el: #app,
        data: {
            list: [],
            id: "",
            inspectlog_code: "20200527",
            inspect_desc: "",
            start_date: "",
            stop_date: "",
            equip_code: "",
            equip: [[${equip}]],
//使用thymeleaf标签使用后台实体,绑定到vue的model employee: [[${employee}]],
}, methods: { add() { console.log("111") let obj = new Object(); obj.id = this.id, obj.inspectlog_code = this.inspectlog_code, obj.inspect_dasc = this.inspect_dasc, obj.start_date = this.start_date, obj.stop_date = this.stop_date, obj.work_timoneer = this.work_timoneer, obj.work_address = this.work_address, obj.work_empCount = this.work_empCount, axios.defaults.headers.post[Content-Type] = application/x-www-form-urlencoded;charset=UTF-8; function postRequest(url, params) { return new Promise((resolve, reject) => { axios.post(url, window.Qs.stringify(params)) .then(res => { if (res.data > 0) { resolve(res.data); } else { //Message.error(res.data.msg) } }) .catch(err => { // reject(err.data) //Message.error(‘服务器出错了‘) }) }); } postRequest(ADD_Inspect,obj); } } }) </script> </body> </html>

 

[前端]纯<script>方式引入库,不启动web服务使用vue+qs+elementUI+thymeleaf。附js包

标签:res   简单   www   rap   一个   element   color   block   下载   

原文地址:https://www.cnblogs.com/suncos/p/12991658.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!