Today Task

Organize the workflow and make it clearer;
Learn CSS , summarize HTML & CSS;
Complete the demo of Online Mall System.

Work Flow

先做思维导图的表设计，等审核；(磨刀不误砍柴工)

Prior to completing diagram design with Xmind ,then wait for approval;

做好表名和字段中英互译+功能列表.txt+代码复制准备；

Complete table and attributes with English translation, fill in function list text and source codes word;

在Jeecg输入制表字段建立,完成数据库建立和测试数据；

Put all attributes into jeecg to generate sql file ,then build the database with test data;

生成vue和java代码然后移动到相应的位置；

Generate codes of vue & java, then move them to concerning path where they should be;

重启前后端代码，配置好路由和菜单；

Reboot the program of front-end & back end, configure router and menu;

若没问题后改好系统名称，进行打包交付。

Rename file with correct title and package them all if there are no any issues.

How to package VUE with yarn & npm

Use npm to install yarn

npm install -g yarn

yarn install

yarn build

then we can get the dist directory

1
2
3

npm install

npm run build

yarn VS npm

What is NPM?

NPM, or Node Package Manager, is the default package manager for Node.js and ships pre-installed when you download Node.js on your system. With NPM, it is quite easy and simple to install, manage and remove Node.js dependencies in your project.

NPM involves three things:

A website for managing various aspects of your NPM experience
A registry for public database of Node.js packages
A CLI for interacting via terminal

What is Yarn?

Yarn, or Yet Another Resource Navigator, is a relatively new package manager developed by Facebook. It was developed to provide more advanced capabilities that NPM lacked at the time (such as version locking) while also making it safer, more reliable, and more efficient.

NPM has introduced several important features ever since Yarn was released. Yarn is now more of an alternative to NPM than a replacement in its current version.

Since Yarn doesn’t come pre-installed with Node.js, it needs to be installed explicitly as:

1	`npm install yarn -g`

Once installed globally, you can use it on a per-project basis by setting the desired version inside our project as below:

1	`yarn set version <version-name>`

https://www.knowledgehut.com/blog/web-development/yarn-vs-npm

Summary of HTML

Basic element

<!-- 请复制以下代码，在浏览器运行查看效果 -->
<h1>标题1</h1>
<h2>标题1</h2>
<h3>标题1</h3>
<h4>标题1</h4>
<h5>标题1</h5>
<h6>标题1</h6>
<!-- 请复制以下代码，在浏览器运行查看效果 -->
<p>与其他的牛鬼蛇神相比，反动学术权威有他们的特点：当打击最初到来时，他们的表现往往是高傲而顽固的，这也是他们伤亡率最高的阶段；在首都，四十天的时间里就有一千七百多名批斗对象被活活打死，更多的人选择了更快捷的路径来逃避疯狂，老舍、吴晗、葛伯赞、傅雷、赵九章、以群、闻捷、海默等，都自己结束了他们那曾经让人肃然起敬的生命。</p>
<p>从这一阶段幸存下来的人，在持续的残酷打击下渐渐麻木，这是一种自我保护的精神外壳，使他们避免最后的崩溃。他们在批斗会上常常进入半睡眠状态，只有一声恫吓才能使其惊醒过来，机械地重复那已说过无数遍的认罪词；然后，他们中的一部分人便进入了第三阶段，旷日持久的批判将鲜明的政治图像如水银般注入了他们的意识，将他们那由知识和理性构筑的思想大厦彻底摧毁，他们真的相信自己有罪，真的看到了自己对伟大事业构成的损害，并为此痛哭流涕，他们的忏悔往往比那此非知识分子的牛鬼蛇神要深刻得多，也真诚得多；而对于红卫兵来说，进入后两个阶段的批判对象是最乏味的，只有处于第一阶段的牛鬼蛇神才能对他们那早已过度兴奋的神经产生有效的刺激，如同斗牛士手上的红布，但这样的对象越来越少了，在这所大学中可能只剩下一个，他由于自己的珍稀而被留到批判大会最后出场。</p>
<p></p>
<!-- 请复制以下代码，在浏览器运行查看效果 -->
<img src="" width="80" height="80" alt="我的头像">

<!-- 请复制以下代码，在浏览器运行查看效果 -->
<a href="https://www.baidu.com" title="鼠标悬浮时的标题" target="_blank">跳转到百度</a>

<!-- a标签实现锚点 -->
<a href="#menu1">锚点目录1</a> 
<a href="#mulu2">锚点目录2</a> 

<h2><a name="menu1">锚点对应目录1内容</a></h2>
<h2 id="mulu2">锚点对应目录2内容</h2>

<!-- a标签实现实现邮件和打电话 -->
<a href="mailto:991107056@qq.com">给老师发邮件</a> 
<a href="tel:18888888888">给老师打电话</a>

<audio src="音频地址" controls>
  您的浏览器不支持audio标签，请升级浏览器
</audio>

<video src="视频地址" controls>
  您的浏览器不支持video标签，请升级浏览器
</video>

<!-- 请复制以下代码，在浏览器运行查看效果 -->
<b>这是一段加粗的文字</b>
<u>这是一段加下划线的文字</u>
<i>这是一段倾斜的文字</i>

<!-- 请复制以下代码，在浏览器运行查看效果 -->
<strong>特别重要的文字</strong>
<em>强调的文字</em>
<mark>这是一段需要高亮的文字</mark>

List element

<!-- 请复制以下代码，在浏览器运行查看效果 -->
<ol>
  <li>第一名</li>
  <li>第二名</li>
  <li>第三名</li>
  <li>第四名</li>
<ol>

<!-- 列表嵌套 -->
<ul>
  <li>
    <h3>福建省</h3>
    <ul>
      <li>厦门市</li>
      <li>漳州市</li>
      <li>泉州市</li>
    <ul>
  </li>
  <li>
    <h3>···</h3>
    <ul>
      <li>···</li>
      <li>···</li>
      <li>···</li>
    <ul>
  </li>
<ul>

  <!-- 请复制以下代码，在浏览器运行查看效果 -->
<dl>
  <dt>定义1</dt>
  <dd>定义1描述</dd>
  <dt>定义2</dt>
  <dd>定义2描述</dd>
  <dt>定义3</dt>
  <dd>定义3描述</dd>
<dl>

table element

<!-- 请复制以下代码，在浏览器运行查看效果 -->
<table>
  <caption>表格的标题</caption>
  <tr>
    <th>姓名</th>
    <th>学号</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>10001</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>10002</td>
    <td>男</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>10003</td>
    <td>女</td>
  </tr>
</table>

form element

http://books.createhoto.com/pages/02-%E7%AC%AC%E4%BA%8C%E7%AB%A0%20HTML%E5%9F%BA%E7%A1%80/05-HTML%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE.html

#HTML #CSS

Record Of March 15th

https://iceswear.github.io/2023/03/20/Record-Of-March-15th/

Author

Spike Wong

Posted on

March 20, 2023

Licensed under

Record Of March 20th Next