在项目中配置 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>
<script src="/semantic/dist/semantic.min.js">script>
这三个文件,有两个在 semantic 文件夹,一个在 node_modules 文件夹
如果需要载入文件,则必须要将这两个文件夹也托管出去
!!!但是,但是,但是
上面说,托管出去之后,语法不允许在请求路径中带文件夹名称
也就是说,当引入一个文件的时候应该
解释: 以上引入文件的时候,没有带 /semantic
这样的话,在引入的时候,编辑器就没有路径提示了,一般这样情况下,极容易自己写错
!!!!所以,所以,所以
在托管出去的时候,加了一个虚拟路径,这样在编辑器引入的时候前面加上文件夹名称,就有提示了
真好~
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())
在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>
给上面的 添加英雄 按钮加一个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/ 更多效果查看官方文档,只需要稍微做点修改。