LayUI 2.8.8

Layui - Minimalist modular front-end UI component library https://layui.dev/ It feels like it has come alive. I still like this UI framework very much.

layuiAdmin pure static UI template (iframe version) (gitee.io) https://layui.gitee.io/v2/themes/layuiAdmin/2.0/iframe/views/ I also like this 2.0 template. It would be better if it can be open source Got it

Let’s study this, combined with the Node.js (Express framework) backend, and the Python (Flask) backend. These two can be quickly formed. I won’t study java, php... and the like for the time being. There is also golang. Let’s study it with vue3 then!

Background data: just operate Mysql and use json directly

Two basic exercises:

1. Traverse data (product display)

头部引入
<link rel="stylesheet" href="./css/layui.css">


//第一步：编写模版。你可以使用一个script标签存放模板，如：
<script id="demo" type="text/html">
  <h3>{
   
   { d.title }}</h3>
  <ul>
  {
   
   {#  layui.each(d.list, function(index, item){ }}
    <li>
      <span>{
   
   { item.modname }}</span>
      <span>{
   
   { item.alias }}：</span>
      <span>{
   
   { item.site || '' }}</span>
    </li>
  {
   
   {#  }); }}
  {
   
   {#  if(d.list.length === 0){ }}
    无数据
  {
   
   {#  } }} 
  </ul>
</script>
 
//第二步：建立视图。用于呈现渲染结果。
<div id="view"></div>
 
//第三步：渲染模版
<script src="../layui/layui.js"></script> //引入
<script>
var data = { //数据
  "title":"Layui常用模块"
  ,"list":[{"modname":"弹层","alias":"layer","site":"https://layui.dev/"},{"modname":"表单","alias":"form"}]
}
var getTpl = demo.innerHTML
,view = document.getElementById('view');
laytpl(getTpl).render(data, function(html){
  view.innerHTML = html;
});
</script>

2. Add, delete, modify and check (product CURD)

code. . . updating

Several comprehensive cases (mall, purchase, sales and inventory, blog)

1. Mall (product display,)

Code: . . . updating

2. Purchase, sale and inventory (the products can be managed, ordered and printed). In the future, it is best to be able to access GPT and the like to help you manage, automatically ask for prices and order, send statements yourself, and be able to access QQ, WeChat, email, and invoicing systems , mobile phone text messaging, this is a slow and long process. . . This is unlikely at this stage. I don’t want software that requires me to operate it myself. For example, the "entry" operation is the most painful. I have to read and type the order myself. There is no way to order it and enter it by myself. . . It is also necessary for people to operate according to the writer's thinking, rather than learning from each other and changing operations. . . . . . . . . . .

Code: . . . updating

2. Blog (software application and download, maintenance data viewing, data collection)

Code: . . . updating