实习日常问题记录_2020

本文最后更新于:January 23, 2021 pm

Linux记录

1.查看端口是否占用

netstat -ntulp | grep PORT_id

2.centos系统目录中文乱码

到当前用户目录中, 修改当前用户的.bashrc

添加下面两行内容

1
2
export LC_ALL="zh_CN.UTF-8"
export LANG="zh_CN.UTF-8"

:wq保存退出后, 执行命令

1
$source ./.bashrc

3.配置环境变量

编辑用户目录下的.bashrc文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$vim .bashrc

# 进入该文件后, 添加如下语句
export PATH=环境的bin目录路径:$PATH

# 退出保存
:wq

# 让环境变量生效
source ./.bashrc

# 查看已配置的环境变量
$echo $PATH

# 暂时取消所有环境变量(重新登录用户即可恢复)
$unset XX_PATH

4.删除中文乱码目录或文件

1
2
3
4
5
# 首先找到文件或目录的inode
$ls -i

# 使用find命令查询并删除此文件或目录
$find -inum 2312334 -exec rm rf {} \;

5. curl命令

curl url

eg: curl www.sina.com

6.远程桌面访问服务器上部署的React项目

Clearlight:
首先看项目是否启动成功, npm start之后, 新建个对话执行 curl http://localhost:3000, 返回了网页源码. 证明项目启动成功.

然后, 就是修改pageage.json里面的proxy为 http://0.0.0.0:3000后, 主机浏览器再去访问 xshell的ip+3000端口 就行了

Clearlight:
一直太执念于 setupProxy.js 里面的两个ip了

7.vim打开文件每行末尾有^M

*方法1: 命令模式下 :%s/^M//g

回车即可替换

其中”^M”的输入,分别是”Ctrl+v”, “Ctrl+m” 键生成的

方法2: 使用vi打开文本文件
vi dos.txt
命令模式下输入
:set fileformat=unix
:w

方法3:使用sed 工具
sed ’s/^M//’ filename > tmp_filename

方法4:既然window下的回车符多了‘\r’,那么当然通过删除‘\r’ ,也可以实现:
tr -d ‘\r’

方法5:最常用的方法,个人觉得最方便
在终端下敲命令:
$ dos2unix filename
直接转换成unix格式,就OK了!~

8.解压zip文件到指定目录

1
$ unzip a.zip -d ./fileName

9.查看linux系统当前时间: date 查看日历: cal

前端记录

1.div遮住底层的按钮了怎么办?

div看起来是透明,但实际上是覆盖在上面的,想点按钮两个方法:
1.div不覆盖到按钮
2.按钮的z-index设置值

2.移动div位置

除了margin:上 右 下 左以外, 还有top:xxpx; left:xxpx;

3.修改button样式以及里面文字的样式

4.react项目中使用jsx语法修复栅格化的显示问题

5.react中的js文件注释的方式

{/* .... */}

6.做后端接口字段

image-20200331164310633

image-20200331165741417

image-20200331170300808

请求接口 api/index.js

image-20200331172849856

7.项目中es6的语法

7.1 箭头函数

1
2
3
4
5
6
var f = v => v;

// 等同于
var f = function (v) {
return v;
};
  • 无参或需要多个参数, 需要圆括号代表参数部分

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var f = () => 5;
    // 等同于
    var f = function () { return 5 };

    var sum = (num1, num2) => num1 + num2;
    // 等同于
    var sum = function(num1, num2) {
    return num1 + num2;
    };
  • 函数的代码块多余一条语句, 需要大括号括起来, 并且使用return语句返回

    1
    var sum = (num1, num2) => { return num1 + num2; }
  • 如果箭头函数返回一个对象, 必须在对象外面加上括号, 否则会报错

    1
    2
    3
    4
    5
    // 报错
    let getTempItem = id => { id: id, name: "Temp" };

    // 不报错
    let getTempItem = id => ({ id: id, name: "Temp" });
  • 简化回调函数

    1
    2
    3
    4
    5
    6
    7
    // 正常函数写法
    [1,2,3].map(function(x) {
    return x*x;
    });

    // 箭头函数写法
    [1,2,3].map(x=>x*x);

7.2 let和const

let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效

const声明一个只读的常量。一旦声明,常量的值就不能改变。

const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了

常量foo储存的是一个地址,这个地址指向一个对象。不可变的只是这个地址,即不能把foo指向另一个地址,但对象本身是可变的,所以依然可以为其添加新属性。

1
2
3
const a = [];
a.push('Hello'); // 可执行
a.length = 0; // 可执行

8.后台数据已经传到前端, 前端也已经获取, 但是内容为空

首先可以先打印获取的长度, 看获取了多少, 如果有长度则说明有接收到数据.

然后在分析数据是否解析正确, 二维数组, 只取数组本身是不行的, 需要 array[0], 这种形式, 来获取二维数组的内容.

9.react项目无法启动, 报错Error:spawn xdg-open ENOENT at Process.ChildProcess._handle.onexit

image-20200407155922496

image-20200407160204627

解决方案:

依赖的问题, 通过 npm i来将依赖下好, 如果下载未成功可以尝试:npm i --registry=https://registry.npm.taobao.org

然后在去 npm start 即可.

10.css小细节

10.1 如何让两个div重叠在一起?

CSS中设置一下position:absolute; z-index:10000;

10.2 如何让div居中?

image-20200408101750093

10.3 font-weight

对象值:从100到900,最常用font-weight的值为bold

10.4 让两个div并排显示

https://blog.csdn.net/liukuan73/article/details/51894476

1
2
<div style="width:300px; height:auto; float:left; display:inline">AAAA</div> 
<div style="width:300px; height:auto; float:left; display:inline">BBBB</div>

最有效的还是flex进行布局, 还可以实现响应式.

11. 如何在react中使用canvas画箭头?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import React, { Component } from 'react';


function rect(props) {

const { ctx, fromX, fromY, toX, toY, color } = props;
var headlen = 10; //自定义箭头线的长度
var theta = 30; //自定义箭头线与直线的夹角,个人觉得45°刚刚好
var arrowX, arrowY; //箭头线终点坐标
// 计算各角度和对应的箭头终点坐标
var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI;
var angle1 = (angle + theta) * Math.PI / 180;
var angle2 = (angle - theta) * Math.PI / 180;
var topX = headlen * Math.cos(angle1);
var topY = headlen * Math.sin(angle1);
var botX = headlen * Math.cos(angle2);
var botY = headlen * Math.sin(angle2);
ctx.beginPath();
//画直线
ctx.moveTo(fromX, fromY);
ctx.lineTo(toX, toY);

arrowX = toX + topX;
arrowY = toY + topY;
//画上边箭头线
ctx.moveTo(arrowX, arrowY);
ctx.lineTo(toX, toY);

arrowX = toX + botX;
arrowY = toY + botY;
//画下边箭头线
ctx.lineTo(arrowX, arrowY);

ctx.strokeStyle = color;
ctx.stroke();
}

class LineRow extends Component {
componentDidMount() {
this.updateCanvas();
}
componentDidUpdate() {
this.updateCanvas();
}
updateCanvas() {



try {
var canvas = document.getElementById('canvas1');


if (!canvas) { console.log('Canvas not found.'); }
else {

if (!canvas.getContext) { console.log('Context not supported.'); }
else {
const ctx = this.refs.canvas.getContext('2d');
if (!ctx) { console.log('Context 2D not available.'); }
else {
rect({ ctx, fromX: 0, fromY: 0, toX: 200, toY: 200, color: "#000" });
}
}
}
}
catch (exc) { console.log(exc); }
}
render() {
return (
<div>
<canvas id="canvas1" ref="canvas" width={300} height={300} />
</div>

)
}
}

export default LineRow;
1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
import ReactDOM from 'react-dom';


import LineRow from './LineRow'

ReactDOM.render(
<React.StrictMode>
{ <LineRow />}
</React.StrictMode>
,
document.getElementById('root')
);

效果:

image-20200413131027416

12.遍历二维数组, 来拼接想要的语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var Demo = React.createClass({
getInitialState:function(){
return {lenght:3}
},
render:function(){
var items = [];
for (var i = 0; i < 3; i++) {
items.push(<div className="item">gagaag</div>);
}

return (
<div>
{items}
</div>

)
}
})
React.render(<Demo/>,document.getElementById('example'))

13.Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?React标签都闭合,但还是报该错误

1.检查标签的拼写是否有误

2.再用一组标签去包装所有东西.即所有内容在套一个div

14.React组件中通信

详情请看:https://blog.csdn.net/qq_36852780/article/details/105541540

15.如何将两个div平行两侧排列

很简单,

显示在右侧的div可以直接position:absolute; right:8px;

16.按钮绑定点击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
render() {
return <div>
{/* 需求: 点击按钮, 把修改msg的值 */}
{/* React绑定事件的标准格式 */}
<button onClick={ () => this.show('Hello', 'pizza')}>按钮</button>
<h3>{this.state.msg></h3>
</div>

}

show = (arg1, arg2) => {
// 注意: React中, 如果想为state中的数据, 重新赋值, 不要使用 this.state.*** = 值
// 应该调用React提供的 this.setState({msg:'124'})
// this.state.msg = '00000'

// 在React中, 推荐使用 this.setState({}) 修改状态值
this.setState({
// 在 setState, 只会把 对应的 state 状态更新, 而不会 覆盖其他的 state 状态
msg: '123' + arg1 + arg2
}, function() { // 回调
console.log(this.state.msg)
})
}

// 注意: this.setState 方法的执行, 是异步的;
// 如果大家在 调用完 this.setState 之后, 又想立即拿到 最新的 state 值, 需要使用 this.setState({},callback)

17. React绑定文本框和state中的值(双向绑定)

image-20200419231957963

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
render() {
return <div>
{/* 如果我们把文本框的 value 属性, 绑定到了 state 状态, 但是, 如果不提供 onChange 处理函数的话, 得到的文本框, 将会是一个只读的文本框 */}
{/* 当为文本框绑定 value 值 以后, 要么同时提供一个 readOnly, 要么, 提供一个 onChange 处理函数 */}
{/* <input="text" style={{ width: '100%'}} value={this.state.msg} readOnly /> */}
<input type="text" style={{width:'100%'}} value={this.state.msg} onChange={(e) => this.txtChanged(e)} ref="txt"/>
</div>


// 每当文本框的内容变化了, 必然会调用这个 TXTChanged
txtChanged = (e) => {
// console.log('变化了');

// 在onChange 事件中, 获取 文本框的值, 有两种方案:
// 方案1: 通过事件参数 e 来获取;
// console.log(e.target.value);
// 在React中, 也有 ref, 如果要获取元素的引用 this.refs.引用名称
// this.refs.txt: 获取引用的元素(<input type="text" value="哈哈" style="width: 100%;")
// this.refs.txt.value: 获取引用的元素的value值
// console.log(this.refs.txt.value)


}

18. 点击按钮生成新的空白窗口

1
2
3
4
5
6
<div onClick={this.show_blank_window}>新窗口</div>

// 新窗口的点击事件
show_blank_window=()={
window.open('about:blank');
}

后端记录

1.Django项目如何启动

Django下载地址:https://www.djangoproject.com/ download/

查看Django版本: python -m django --version

1.在项目根目录执行python manage.py

2.如果报错的话, 执行pip install xxxx

3.安装了之后,再运行python manage.py看是否成功

4.一直运行可以执行:python manage.py runserver

对于内部服务器来说, 已经下载好的模块可以执行pip install 模块名 --target=/home/下载好的模块路径/site-packages

5.你确实启动成功了, 可是你是启动在默认的ip和端口 127.0.0.1:8000上…如果你想启动在本机ip:port的话, 需要执行python manage.py runserver 0.0.0.0:8000


本文作者: xyli
本文链接: http://clearlight.com.cn/posts/38652.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!