nodejs前端框架——semantic-ui模块

1.0 在项目中配置和使用semantic-ui

​ 在项目中配置 semantic-ui ，其实就是让 views 目录里面的html文件引入外面文件夹的文件
​ 如果是直接在 views 里面，由于托管了，所以不需要再设置什么

const express = require('express')
const app = express()

// 托管 views 文件夹下的文件
app.use(express.static('./views'))
// 托管 semantic 文件夹里的静态资源
app.use('/semantic', express.static('./semantic'))
app.use('/node_modules', express.static('./node_modules'))

app.listen(3001, () => {
    console.log('server running at http://127.0.0.1:3001')
})

说明

​ 将 views 文件夹托管了，那么在访问页面的时候
​ 本应该是 127.0.0.1:3001/views/index.html

​ 现在访问方式 127.0.0.1:3001
​ 原因是托管出去的文件夹，在请求文件的时候，语法不允许再写这个文件夹

​ 而在 index.html 中需要引入以下三个文件

    <link rel="stylesheet" href="/semantic/dist/semantic.min.css">
    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <!-- semantic 文件依赖jquery -->
    <script src="/semantic/dist/semantic.min.js"></script>

​ 这三个文件，有两个在 semantic 文件夹，一个在 node_modules 文件夹

​ 如果需要载入文件，则必须要将这两个文件夹也托管出去

​ ！！！但是，但是，但是

​ 上面说，托管出去之后，语法不允许在请求路径中带文件夹名称

​ 也就是说，当引入一个文件的时候应该 <link rel="stylesheet" href="/dist/semantic.min.css">

​ 解释： 以上引入文件的时候，没有带 /semantic

​ 这样的话，在引入的时候，编辑器就没有路径提示了，一般这样情况下，极容易自己写错

​ ！！！！所以，所以，所以

​ 在托管出去的时候，加了一个虚拟路径，这样在编辑器引入的时候前面加上文件夹名称，就有提示了

​ 真好~

1.1 通过ajax请求获取服务器的数据

​ 1，启动 phpstudy 中的mysql服务

​ 2，运行后端项目

​ 3，运行前端项目

​ 在 views 文件夹新建js文件，创建ajax请求

	// 获取英雄列表
    function getAllHeros() {
        $.ajax({
            type: 'get',
            url: 'http://127.0.0.1:5001/getallheros',
            success: function(res) {
                var html = template('rows', res)
                $("#tbd").html(html)
            }
        })
    }

    getAllHeros()

​ 此时出现了跨域的报错信息

​ 那么需要在 后端项目 的 server.js 中下载 cors 模块，并且导入

​ npm i cors -S

// 导入cors模块
const cors = require('cors')
app.use(cors())

1.2 完成英雄列表的渲染

​ 在html中，使用 semantic 的表格，和 art-template 模板渲染数据

​ npm i art-template -S

​ 引入 art-template 模板文件

    <h1>英雄列表</h1>
    <button class="ui primary button" id="add">添加英雄</button>

    <table class="ui celled striped blue table">
        <thead>
            <tr>
                <th>编号</th>
                <th>英雄名称</th>
                <th>性别</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tbd"></tbody>
    </table>

    <script type="text/template" id="rows">
        {{ each data }}
            <tr>
                <td>
                    <div class="ui ribbon label {{ $value.isdel ? 'red' : 'blue' }}">
                        {{ $value.isdel ? '删除' : '正常' }}
                    </div>
                    {{ $value.id }}
                </td>
                <td>{{ $value.name }}</td>
                <td>{{ $value.gender }}</td>
                <td>{{ $value.ctime }}</td>
                <td>
                    <a href="javascript:;">编辑</a>
                    <a href="javascript:;">删除</a>
                </td>
            </tr>
        {{ /each }}
    </script>

1.3 编辑添加英雄页面

​ 给上面的 添加英雄 按钮加一个id，当触发点击事件的时候，显示以下的弹出层

	// 触发弹出层
    $("#add").on('click', function() {
        $('.ui.modal').modal('show')
    })
    // 激活下拉框样式和功能
    $('.ui.dropdown').dropdown()

​ 弹出层结构

    <div class="ui tiny modal">
        <i class="close icon"></i>
        <div class="header">
            添加英雄信息
        </div>
        <div class="content">
            <form class="ui form" id="userInfo">
                <div class="field">
                    <label>名称：</label>
                    <input type="text" name="name" placeholder="姓">
                </div>
                <div class="field">
                    <label>性别：</label>
                    <select name='gender' class="ui fluid dropdown">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
            </form>
        </div>
        <div class="actions">
            <div class="ui black deny button">
                取消
            </div>
            <div class="ui positive right button" id="addBtn">
                添加
            </div>
        </div>
    </div>

这是semantic-ui模块的官网: https://semantic-ui.com/ 更多效果查看官方文档,只需要稍微做点修改。

---