软件实训-技术学习心得
一、MoOtA
前端主要负责动态界面的编写,主要学习JavaScript,HTML,CSS
三件套
1、前端项目文件夹
.idea:无需关注
node_modules:无需关注
public:存放媒体资源,比如图片(images),视频(videos),需要引入资源时就进行修改
src:存放代码资源(重点)
pages
:存放编写的页面
utils:存放全局的工具函数,需要添加新的工具函数时就进行修改
web
:存放网络请求函数,无需关注
App.js+css:存放应用路由文件,需要修改路由时就进行修改
index.js+css:存放固定起始文件,无需关注
.gitignore:无需关注
package.json:无需关注
package-lock.json:无需关注
README.md:无需关注
2、前端编程注意事项
1. 命名规范
命名必须有明确意思,单词完整,不能是abc,123之类的缩写
文件名小写开头,其余大写,比如 home.js,homeModule.js
JS内每一个函数式组件都大写,比如Home,HomeModule
函数式组件内部变量和函数都小写开头,其余大写,比如openMessage,setTimeOut
函数式组件的中 return 的 html 页面中的标签需要用-隔开,每层标签由上层标签结合本层标签组成,标签小写开头,其余大写,比如 homeModule-href-backgroundImage。
2. 编程语法
CSS用来设置界面布局,效果,不会的属性,可以直接百度,教程很多
JS中;可写可不写,建议写上
let 申请变量
const 申请常量
// 单行注释,/* */ 多行注释
{ xxx:xxx} 数据格式
function 关键字可以申请函数
import 关键字可以引入其他模块的内容
export 关键字可以允许本模块的特定内容被其他模块调用
JS 中函数可以作为变量保存
,类似
const XXX = ()=>{// 其他代码
}
或者
const XXX = function(){// 其他代码
}
函数式编程
的固定格式为
export const XXX = function(props){ // 其他代码return <div>HelloWorld</div>
}
export 表示该组件可被其他模块调用
const 表示该组件不可变,
function 用于申请函数
props 传入 { xxx : xxx}
return 返回该组件表示的页面
<div></div> 放自己编写的页面
函数式编程中可以使用 useState
保持数据状态,语法格式为
const [xxx,setXXX] = useState(init)
xxx 表示变量名
setXXX 表示设置变量值
useState 表示申请一个保持状态
init 是变量的初始值
网络请求使用 web 模块的 requestGet
方法,语法格式为
requestGet(url, data, callback)
url 是后端响应路由,默认是 http://localhost:2058/ + 你想请求的路由
data 是向后端传输的数据,数据格式为 { xxx:xxx},注意前后端解析数据内容时要保持一致
callback 是后端响应完成的回调函数,比如可以将数据用来显示
3. 控件库 / 界面 / 图标网站
Ant Design - 一套企业级 UI 设计语言和 React 组件库
日本传统色彩-日本传统颜色-日本色 (18wall.com)
Flex 布局语法教程 | 菜鸟教程 (runoob.com)
iconfont-阿里巴巴矢量图标库
React 基础
图标 Icon - Ant Design
ant引用格式
为:
import {xxx} from "@ant-design/icons";
import {xxx} from 'antd';
<xxx></xxx>
后端主要负责SQL语句的编写,主要学习JS 数据库逻辑由JS组成。
3、后端项目文件夹
.idea:无需关注
node_modules:无需关注
controller
:存放响应前端路由文件
sql:存放数据库请求文件,无需关注
app.js:存放监听前端路由文件,需要修改路由时就进行修改
index.js:存放固定起始文件,无需关注
package.json:无需关注
package-lock.json:无需关注
4、后端编程注意事项
1. 命名规范
同前端
2. 编程语法
async关键字可以申请异步函数
await关键字可以等待异步函数返回
3. 路由响应
在 app.js 编写对应路由响应
,语法格式为:
const xxxController = require('./controller/xxxController')
app.get('/你的路由',(req,res,next)=>{res.setHeader('access-control-allow-origin', '*'); // 设置跨域const content = JSON.parse(req.query.content); // 获取前端传入的数据// 对应路由的 controller 代码xxxController.xxx()
});
在 controller 编写对应路由响应具体内容,建议一个路由一个 controller,例如:
const xxx = async function(content,res){let result = {xxx:xxx}// 有SQL语句执行SQL语句// 设置 resultres.send(JSON.stringify(result)); // 将 result 转为 json 格式便于网络传输res.status(result.status).end(); // 关闭请求
}
module.exports = {xxx,
}
4. 数据库编程
使用 getSqlrResult
执行 SQL 语句,语法格式为:
async getSqlResult(sql,sqlParameter);// 例子
const sql = 'Update User Set name = ? Where userID = ?'
const sqlParameter = ['moota','001']
const sqlResult = await getSqlResult(sql,sqlParameter);
// 在进行数据的处理sql表示SQL语句
sqlParameter表示SQL参数
二、Blade Unicorn
本次软件工程我们选择进行网页开发
,其中前端技术采用js+css,后端使用js+sql。
由于在暑期实训过程中同样使用这一套技术,因此本次开发前端时相对比较得心应手。创建文件时配套新建js+css的文件,尽量采取驼峰命名来保证整体规范性。在前端编写
静态界面
时,先在js文件中使用html标签来增加模块(注意写在export中以允许该模块被其他模块调用),再使用css进行样式调整。尽量做到一个模块一套文件。在进行页面编写时有多个网站可进行参考,方便初学者使用:
1)https://ant.design/components/overview-cn:Ant-Design,是一套react组件库;
2)https://www.runoob.com/css/css-tutorial.html:css菜鸟教程
3)https://www.runoob.com/w3cnote/flex-grammar.html:flex布局菜鸟教程
4)http://18wall.com/japanesecolors/:日本传统色彩大全
搭配以上网站来进行界面编写大大降低了难度,使得设计更加方便快捷。
编写完静态界面后再在其基础上编写函数并赋予html标签以达到动态效果
。函数式编程
的固定格式为:export const XXX = function(props){ // 其他代码 return <div>HelloWorld</div> } ·export 表示该组件可被其他模块调用 ·const 表示该组件不可变, ·function 用于申请函数 ·props 传入 { xxx : xxx} ·return 返回该组件表示的页面 ·<div></div>放自己编写的页面
函数式编程中可以使用
useState
保持数据状态,语法格式为:const [xxx,setXXX] = useState(init) ·xxx 表示变量名 ·setXXX 表示设置变量值 ·useState 表示申请一个保持状态 ·init 是变量的初始值
网络请求使用 web 模块的
requestGet
方法,语法格式为requestGet(url, data, callback) ·url 是后端响应路由,默认是 http://localhost:2058/ + 你想请求的路由 ·data 是向后端传输的数据,数据格式为 { xxx:xxx},注意前后端解析数据内容时要保持一致 ·callback 是后端响应完成的回调函数,比如可以将数据用来显示
后端使用js来编写sql语句并执行。
三、某兔
1. 前端
HTML
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。HTML标签是由尖括号包围的关键词, HTML 标签通常是成对出现的,比如和
标签对中的第一个标签是开始标签,第二个标签是结束标签 一个HTML元素包含了开始标签、内容、结束标签。例如:
这是一个段落。
.并且标签是可以嵌套的。
CSS
指层叠样式表 (Cascading Style Sheets),通过样式定义如何显示 HTML 元素。
把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题。外部样式表通常存储在 CSS 文件中,可以极大提高工作效率。HTML 用于撰写页面的内容,而 CSS 将决定这些内容该如何在屏幕上呈现。网页的内容是由 HTML的元素构建的,这些元素如何呈现,涉及许多方面,如整个页面的布局,元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。JavaScript
是 Web 的编程语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。JavaScript的出现,可以使得信息和用户之间不仅只是一种显示和浏览的关系,而是实现了一种实时的、动态的、可交互的表达能力。从而基于CGI静态的HTML页面将被可提供动态实时信息,并对客户操作进行反应的Web页面取代。JavaScript 脚本正是满足这种需求而产生的语言。
2. 后端
SQL
是用于访问和处理数据库的标准的计算机语言。用于管理关系数据库管理系统(RDBMS)。 SQL 的范围包括数据插入、查询、更新和删除,数据库模式创建和修改,以及数据访问控制。在之前的数据库课程中,我们已经掌握了sql语言的应用。
四、言述
考虑到用户学习效果,粒子呈现方式等因素,决定由web技术
实现粒子初学者平台。
Web是一种典型的分布式应用结构,表现为三种形式,即超文本(hypertext)、超媒体(hypermedia)、超文本传输协议(HTTP)等。WEB技术指的是开发互联网应用的技术总称,一般包括WEB服务端技术和WEB客户端技术。Web客户端的主要任务是展现信息内容。Web客户端设计技术主要包括:HTML语言、Java Applets、脚本程序、CSS、DHTML、插件技术以及VRML技术。Web服务器技术主要包括服务器、CGI、PHP、ASP、ASP.NET、Servlet和JSP技术。
下面对小组涉及到的前后端技术作学习介绍:
1. 前端
(1)HTML
:超文本标记语言,是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台。使用HTML,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件“翻译”成可以识别的信息,即我们所见到的网页。事实上,每一个HTML文档都是一种静态的网页文件,这个文件里面包含了HTML指令代码,这些指令代码并不是一种程序语言,只是一种排版网页中资料显示位置的标记结构语言,易学易懂,非常简单。
(2)JavaScript
:一种具有函数优先的轻量级,解释型或即时编译型的编程语言。主要应用在前端开发过程中的编程语言,当然随着发展现在已经不仅仅能够应用在前端中,一些非浏览器环境下也能够运行。它实现网页的交互功能。网页主要由HTML+CSS实现,但只能实现一个静态的内容效果,想要实现交互和更炫酷的效果那么就需要使用JS的帮助,所以HTML+CSS+JS被称为前端三剑客。
(3)CSS
:是“Cascading Style Sheet”的缩写,中文意思为“层叠样式表”,它是一种标准的样式表语言.主要作用是定义网页的样式(美化网页),对网页中元素的位置、字体、颜色、背景等属性进行精确控制。CSS 不仅可以静态地修饰网页,还可以配合 JavaScript 动态地修改网页中元素的样式,而且市面上几乎所有的浏览器都支持 CSS。
2. 后端
(1)MySQL
:关系型数据库(Relational Database Management System), 这种所谓的"关系型"可以理解为"表格"的概念, 一个关系型数据库由一个或数个表格组成, 如图所示的一个表格:
(2)Express
:Node(正式名称 Node.js)是一个开源的、跨平台的运行时环境,有了它,开发人员可以使用JavaScript创建各种服务器端工具和应用程序。此运行时主要用于浏览器上下文之外(即可以直接运行于计算机或服务器操作系统上)。Express是最流行的 Node 框架,是许多其它流行Node 框架的底层库。它提供了以下机制:
①为不同 URL 路径中使用不同 HTTP 动词的请求(路由)编写处理程序。
②集成了“视图”渲染引擎,以便通过将数据插入模板来生成响应。
③设置常见 web 应用设置,比如用于连接的端口,以及渲染响应模板的位置。
④在请求处理管道的任何位置添加额外的请求处理“中间件”
简单示例:
3. 总结
软件开发编程对于毫无经验的我来说是一个全新的体验。随着粒子初学者平台的搭建深入,小组到了编程阶段。我认识到相关技术的广度与深度,除了mysql在课程中学习过,其他技术都觉得陌生。通过自主学习和小组分享,我已经对这些技术有了一个大致的认识与理解,也开始上手写一些简单的程序,同时也认识到真正完成一个软件的开发运行并非易事
。技术的掌握不是一朝一夕就能完成,这是一个漫长的过程。我们可能最终达不到粒子初学者平台精美完善的状态,但更多享受的是软件开发的学习过程
。经过小组商议,考虑到前期将平台分成四大功能,我们小组四人将继续负责各自部分,共同完成其前后端编程设计,技术均见上述。此外,会以闯关为首要目标,至少保证其正确呈现。
软件实训-技术学习心得相关推荐
- 做python的心得体会_实训python的心得体会
如何学习Python的一些总结 C++.Java乃至C#都可以看做是同一类型的语言:C++还算灵活,但纷繁复杂的语法使得生产效率低下,Java提高了生产效率,却损失了灵活性;C#算是在生产效率和灵活性 ...
- 软件实训之从调研到设计,产品设计的从0到1
软件实训之从调研到设计,产品设计的从0到1 内容关键词:调研.设计.产品 课程: 软件项目实训 授课老师:张森鹏(新浪ID:sunlifestyle,中城投丝路.720科技) 知识来源: 网络资源 ...
- 计算机科学与技术学习心得(转载)
计算机科学与技术学习心得 计算机科学与技术反思录 计算机科学与技术这一门科学深深的吸引着我们这些同学们,上计算机系已经有近 三年了,自己也做了一些思考,我一直认为计算机科学与技术这门专业,在本科阶段是 ...
- 好文章 强烈推荐计算机专业的看,“计算机科学与技术学习心得”
计算机科学与技术学习心得 撰文 曾毅 声明: 1.本文集众前辈及恩师之经验于一文,由我执笔总结前辈所感而已.并非尽我所言,特别说明基于南京大学网友sir在南京大学小百合站点发表的文章<理论计算机 ...
- 计算机flash实训体会与收获,实训收获和心得体会300字
实训收获和心得体会300字 心中有不少心得体会时,往往会写一篇心得体会,如此可以一直更新迭代自己的想法.你想好怎么写心得体会了吗?以下是小编精心整理的实训收获和心得体会300字,供大家参考借鉴,希望可 ...
- 计算机知识上的收获,计算机实训收获和心得体会
计算机实训收获和心得体会 某些事情让我们心里有了一些心得后,好好地写一份心得体会,这么做能够提升我们的书面表达能力.那么心得体会怎么写才能感染读者呢?下面是小编为大家整理的计算机实训收获和心得体会,供 ...
- eovs实训报告总结心得_实训总结与心得体会3篇_心得体会
1 / 12 文章来源网络整理,仅供参考学习 实训总结与心得体会 3 篇 实训室是完成实践教学,培养和训练学生技能的一个重要场所, 实训项目是高职院校实训室构成的最基本元素, 是实训室建设的基础, 下 ...
- 河南城建计算机网络试卷,河南城建计算机网络技术学习心得体会.docx
河南城建计算机网络技术学习心得体会 河南城建计算机网络技术学习心得体会 计算机网络技术学习心得体会 众所周知,21世纪是一个信息经济时代.为适应时代的发展,作为一名即将走出校园参加工作的当代大学生,所 ...
- 软件实训之深刻理解原型图设计的核心
软件实训之深刻理解原型图设计的核心 内容关键词: 原型图设计 知识来源: 网络资源汇总整理.张森鹏讲课视频汇总整理 课程: 软件项目实训 授课老师:张森鹏(新浪ID:sunlifestyle,中 ...
最新文章
- 量子计算机就要来了,它真的能改变世界吗?
- C语言基础-简单程序分析
- 剑指Offer:反转链表【24】
- python123数值运算代码_Python中的变量、数据类型(数值、列表)操作实例
- 计算机对教育的影响雅思听力,雅思听力机考带来的两大影响
- 【OSGI】Error osgi xx Invalid value for DynamicImport-Package dynamic.import.pack
- 代替Reflection(反射)的一些方法
- SushiSwap将于5月17日上线IDO平台Miso
- tomcat7.0.55配置单向和双向HTTPS连接
- 【知识图谱系列】基于2D卷积的知识图谱嵌入
- 年度最流行英文字体20款
- pandas读取xlsx文件
- c语言的typedef struct 对应java参数类型,JNA实战系列:02JNA与C语言中的数据类型映射以及复杂结构体传参示例...
- Vue禁止浏览器自动填充
- 会计信息质量可靠性的案例_论会计信息质量特征及其可靠性
- verilog 锁存器
- 5阶魔方阵c语言程序设计,五阶魔方阵源代码c语言课到程设计.docx
- [转]用Web标准进行开发
- 基于控制台的c语言游戏常用操作
- OID的获取及使用方法